Janela modal Bootstrap centralizada verticalmente


181

Gostaria de centralizar meu modal na janela de exibição (meio) Tentei adicionar algumas propriedades css

 .modal { position: fixed; top:50%; left:50%; }   

Estou usando este exemplo http://jsfiddle.net/rniemeyer/Wjjnd/

eu tentei

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })

Tente substituir .modal.fade.intambém
haim770


3
Experimente este zerosixthree.se/… eu uso: .modal.fade.in {top: 50%; transformar: translateY (-50%); }
jowan sebastian 13/11/14

Solução flexbox adicionada (a translateY(-50%)que torna o topo do modal inacessível quando o conteúdo modal é mais alto que a altura do dispositivo).
tao

A partir do bootstrap 4, o modal-dialog-center foi adicionado e isso não é mais necessário. Reveja essa resposta abaixo.
jcaruso

Respostas:


258

Isso faz o trabalho: http://jsfiddle.net/sRmLV/1140/

Ele usa um helper-div e alguns CSS personalizados. Não é necessário javascript ou jQuery.

HTML (baseado no código de demonstração do Bootstrap )

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

Com esta solução, devido à altura: 100%; e largura: 100%; você não pode fechar os modais clicando fora dos modais. Você consegue pensar em uma correção para este @Rens de Nobel?
pcatre

1
Ok, esta solução parece funcionar muito bem (exceto que me impede de fechar os modais clicando fora deles). Mas, de alguma forma, isso faz com que alguns dos meus testes e2e falhem com o transferidor (e não consigo encontrar o motivo, não parece que isso seja um bug). Enfim, voltarei à resposta javascript para não perder mais tempo com isso. Mas, como eu disse, isso parece funcionar bem, apenas alertando as pessoas que fazem testes e2e com transferidor para tomar cuidado.
pcatre

3
@pcatre, obrigado pela dica! Atualizei o código com uma correção para isso. Definir eventos-ponteiro: nenhum; nas classes de alinhamento faz o truque. Testado no IE11, Latest Chrome e Firefox e iOS Safari.
RNBel

4
Não tenho certeza se isso foi atualizado desde os comentários dos usuários dizendo que não funciona, no clique de elementos modais internos, mas isso está 100% funcionando para mim a partir de agora, usando o exemplo no Fiddle acima. Muito obrigado por sua ajuda e por todos os comentários acima.
Michael G

2
A partir do bootstrap 4, o modal-dialog-center foi adicionado e isso não é mais necessário. Reveja essa resposta abaixo.
jcaruso

94

Como a resposta do gpcola não funcionou para mim, editei um pouco para que funcione agora. Eu usei "margin-top" em vez de transformar. Além disso, eu uso o evento "show" em vez de "mostrado", porque depois ele me deu um salto muito ruim de posicionamento (visível quando você tem animações de auto-inicialização). Certifique-se de definir a exibição como "bloquear" antes do posicionamento, caso contrário, $ dialog.height () será 0 e o modal não será centralizado completamente.

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2,
        bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);
    });
}(jQuery));

6
Este é perfeito! Assim, em vez de $ (document) .height () sua correta para usar $ (janela) .height () na linha 4. Além disso, eu iria mudar a última linha para: $('.modal:visible').each(centerModal);
Denis Chmel

Funciona perfeitamente para mim, obrigado. quando usamos esse código, também devemos definir o preenchimento na parte superior e inferior da caixa de diálogo modal para 0px, para aperfeiçoar a centralização.
mina morsali

Isso é interrompido se o modal for mais alto que a altura da janela. Então, adicionei a seguinte linha antes de definir a margem superior da caixa de diálogo: if(offset < 0) offset = 0; Estou colando o bloco inteiro em um caso de resposta que não está claro!
jetlej

Eu adicionado algumas outras modificações para manter a margem superior igual à margem inferior do modal, na resposta abaixo
jetlej

Perfeito, faltava $ (this) .css ('display', 'block'); todo o tempo e pensei por que tinha de altura 0.
Jānis Gruzis

81

Foi o que fiz para o meu aplicativo. Se você observar as seguintes classes no arquivo bootstrap.css, o arquivo .modal-dialog possui um preenchimento padrão de 10px e a tela @media e (largura mínima: 768px) .modal-dialog possui um preenchimento superior definido como 30px. Portanto, no meu arquivo CSS personalizado, defino meu preenchimento superior como 15% para todas as telas sem especificar a largura da tela de mídia. Espero que isto ajude.

.modal-dialog {
  padding-top: 15%;
}

6
isso só trabalho para caixas alret pequenas, e não trabalho para caixas larg
mina morsali

Você pode se inscrever em pequenos modais:.modal-dialog.modal-sm { padding-top:15%; }
Dunc

61

A melhor maneira que encontrei para todos os navegadores HTML5:

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

2
Gostei desta solução, muito limpa. Não tenho certeza de secretária ou versões mais antigas do Safari, mas parece estar bem no iOS 8.
Nicolas Galler

1
Sim, eu concordo com @NicolasGaller. Funciona bem para mim também. Eu testei no Chrome e Firefox. Isso funciona bem.
precisa saber é o seguinte

2
Este é um ótimo aprimoramento progressivo apenas no CSS. Nenhum js é necessário e qualquer navegador que não suporte o flexbox obterá o posicionamento modal de auto-inicialização padrão.
Craig Harshbarger

Fechar, mas interrompe a possibilidade de fechar os modais quando houver mais de um na página. Veja minha resposta abaixo para corrigir.
Robert McKee

1
Update: Adicionando align-items: center;a body.modal-open .modalparece trabalho.
bernie

20
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

// Styles

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}

3
Esta é a resposta universal. Não sei por que ninguém votou a favor.
Csaba Toth

3
Passei por pelo menos 4 entradas de SO, cada uma com uma dúzia de propostas. BTW, na idade do HTML5, isso deve ser construído em funcionalidade para alguma estrutura, pelo menos. Em vez de malabarismo.
Csaba Toth

1
Observe também: se você disser width: 100% para o estilo da tabela, obterá centralização horizontal (caso o modal não esteja oculto).
Csaba Toth

1
Melhor resposta de longe. Isso cria uma barra de rolagem, mas você pode desativá-la tornando .modal-open .modal {overflow-y: hidden; }
Christophe

14

O parâmetro top está sendo substituído em .modal.fade.in para forçar o valor definido em sua declaração customizada, adicione a !importantpalavra - chave após top. Isso força o navegador a usar esse valor e ignora quaisquer outros valores para a palavra-chave. Isso tem a desvantagem de que você não pode substituir o valor em nenhum outro lugar.

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}

Isso me impede de fechar o modal ao clicar no plano de fundo sobre o modal.
21915 Scott Simpson

13

A partir do Bootstrap 4, a seguinte classe foi adicionada para conseguir isso sem JavaScript.

modal-dialog-centered

Você pode encontrar a documentação deles aqui .

Obrigado vd por indicar que você precisa adicionar ambos .modal-dialog-centrado em .modal-dialog para centralizar verticalmente o modal.


1
Esta é a melhor resposta para inicialização 4.
broc.seib

adicionando modal-dialog e modal-dialog-centered tem melhor resultado
vd

1
O @vd que é entendido, dada a documentação, diz "Adicione .modal-dialog-centrado a .modal-dialog para centralizar verticalmente o modal". Vou atualizar minha resposta para refletir isso também para aqueles que não entenderam isso.
jcaruso

12

isso funciona perfeitamente para mim:

.modal {
text-align: center;
padding: 0!important;
}

.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}

.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}

URL completo da demonstração : https://codepen.io/dimbslmh/full/mKfCc


11

você pode usar:

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

para centralizá-lo vertical e horizontalmente.


2
Este é o verdadeiro "como centralizar algo" com CSS sem usar o Flex. O fato de o contexto ser Bootstrap ou um modal deve ser irrelevante. Todas as outras respostas são muito exageradas.
ESR

1
Com esse método, se o modal for mais alto que a altura da tela do dispositivo, a parte superior do modal ficará inacessível.
tao

11

Como a maioria das respostas aqui não funcionou ou apenas parcialmente:

body.modal-open .modal[style]:not([style='display: none;']) {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
    margin: auto;
}

Você precisa usar o seletor [style] para aplicar apenas o estilo no modal atualmente ativo, em vez de todos os modais. .interia sido ótimo, mas parece ser adicionado somente após a transição, o que é tarde demais e causa algumas transições realmente ruins. Felizmente, parece que o bootstrap sempre aplica um atributo de estilo no modal, assim como está começando a aparecer, então isso é um pouco invasivo, mas funciona.

A :not([style='display: none;'])parte é uma solução alternativa para a autoinicialização não remover corretamente o atributo de estilo e, em vez disso, definir a exibição de estilo como nenhuma quando você fechar a caixa de diálogo.


Ótimo, obrigado. Na verdade, é a única coisa que funcionou em 2016.
AlexioVay 31/10/16

4 anos se passaram. Ainda é útil. Obrigado companheiro!
Hassan Nomani 03/07

8

Você pode alcançar o centro de alinhamento vertical no modal Bootstrap 3 assim:

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

e adicione essa classe css ao contêiner "modal-dialog"

<div class="modal-dialog modal-vertical-centered">
...

Exemplo de trabalho do jsFiddle: http://jsfiddle.net/U4NRx/


Como exatamente ele centraliza o diálogo verticalmente?
gkalpak

Funciona muito bem na maioria dos lugares, mas não funciona em aplicativos html5 menores que o Android 4.4.
Josh

3
Meu modal estava abaixo da página com isso #
Dorian

1
SIM! Eu uso: .modal.fade.in {top: 50%; transformar: translateY (-50%); }
jowan sebastian 13/11/14

Basta modificar de 50% a 15% e a caixa de diálogo estará no centro da janela. .modal-vertical-centered {transform: translate (0, 15%)! important; -ms-transform: translate (0, 15%)! importante; / * IE 9 / -webkit-transform: translate (0, 15%)! Important; / Safari e Chrome * /}
Haimei 28/01

8

A maneira mais limpa e simples de fazer isso é usar o Flexbox! A seguir, alinharemos verticalmente um modal do Bootstrap 3 no centro da tela e é muito mais limpo e mais simples do que todas as outras soluções postadas aqui:

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

NOTA: Embora essa seja a solução mais simples, ela pode não funcionar para todos devido ao suporte do navegador: http://caniuse.com/#feat=flexbox

Parece que (normalmente) o IE fica para trás. No meu caso, todos os produtos que desenvolvo para mim ou para os clientes são o IE10 +. (não faz sentido para os negócios investir tempo de desenvolvimento suportando versões mais antigas do IE quando ele poderia ser usado para realmente desenvolver o produto e liberar o MVP mais rapidamente). Certamente não é um luxo que todos tenham.

Vi sites maiores detectarem se o flexbox é suportado ou não e aplicar uma classe ao corpo da página - mas esse nível de engenharia de front-end é bastante robusto e você ainda precisará de um fallback.

Eu encorajaria as pessoas a abraçar o futuro da web. O Flexbox é incrível e você deve começar a usá-lo, se puder.

PS - Este site realmente me ajudou a entender o flexbox como um todo e aplicá-lo a qualquer caso de uso: http://flexboxfroggy.com/

EDIT: No caso de dois modais em uma página, isso deve se aplicar a .modal.in


Caso contrário, isso funciona bem, mas a animação de fechamento não parece boa.
precisa saber é o seguinte

Deve ser capaz de realizar uma animação com transições CSS3?
Greg Blass

7

Vantagens:

  • conteúdo modal acessível mesmo quando mais alto que o dispositivo
  • não usa display:table-cell(isso não é para layouts)
  • não requer nenhuma modificação no modal padrão do Bootstrap 3 markup
  • o posicionamento é CSS puro. O JS é adicionado para fechar o modal ao clicar / tocar abaixo e acima dele
  • Incluí o sem prefixo SCSSpara quem usa gulpougrunt

Nota : Pretendo manter esta resposta atualizada com as últimas especificações do Bootstrap 3. Para uma solução Bootstrap 4, consulte esta resposta (por enquanto elas são mais ou menos iguais, mas com o tempo podem divergir). Se você encontrar algum bug ou problema, informe-me e atualizarei. Obrigado.


Limpo, sem prefixo SCSS(para uso com gulp/ grunt):

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
  @media (max-width: 767px) {
    min-height: calc(100vh - 20px);
  }
}

2
Melhor solução IMO.
Radmation

3

Mais uma solução CSS. Não funciona para pop-ups maiores que a porta de exibição.

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

Em .modal-dialogclasse, substituindo a posição por absoluta (de relativa) e centralizando o conteúdoright:0, left: 0

Ao .modal.fade .modal-dialog , .modal.in .modal-dialogdefinir a animação de transição ao topinvés de traduzir.

margin-topmove o pop-up ligeiramente abaixo do centro no caso de pop-up pequeno e no caso de pop-ups longos, o modal fica preso no cabeçalho. Conseqüentementemargin-top:0, margin-bottom:0

Precisa refinar ainda mais.


3

Para quem estiver usando o bootstrap angular-ui, adicione as classes abaixo com base nas informações acima:

Nota: Nenhuma outra alteração é necessária e deve resolver todos os modais.

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

3

Não há necessidade de nos javascript. O Boostrap modal adiciona classe .in quando aparece. Basta modificar essa combinação de classes com modalclassName.fade.in com flex css e pronto.

adicione este css para centralizar seu modal verticalmente e horizontalmente.

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}

2

Minha escolha, apenas um pouco de CSS: (NÃO está funcionando no IE8)

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

Você pode jogar com a primeira regra para alterar a aparência do modal.

Usando: Bootstrap 3.3.4


2

Basta adicionar o seguinte CSS ao seu já existente, ele funciona bem para mim

.modal {
  text-align: center;
}
@media screen and (min-width: 768px) {
    .modal:before {
      display: inline-block;
      vertical-align: middle;
      content: " ";
      height: 100%;
    }
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

2

Com base na resposta de Arany , mas também contabilizando o rolagem da página.

(function($) {
    "use strict";
    function positionModals(e) {
        var $this = $(this).css('display', 'block'),
            $window = $(window),
            $dialog = $this.find('.modal-dialog'),
            offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
            marginBottom = parseInt($dialog.css('margin-bottom'), 10);

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));

2

Acho que essa é uma solução CSS pura e mais limpa do que a solução de Rens de Nobel. Além disso, isso não impede o fechamento da caixa de diálogo clicando fora dela.

http://plnkr.co/edit/JCGVZQ?p=preview

Basta adicionar alguma classe CSS ao contêiner DIV com a classe .modal-dialog para obter maior especificidade do que o CSS de autoinicialização, por exemplo, centrado.

HTML

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog centered modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

E torne esse contêiner .modal-dialog.centered fixo e posicionado corretamente.

CSS

.modal .modal-dialog.centered {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

Ou ainda mais simples usando o flexbox.

CSS

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

Esta versão do flexbox não funciona conforme o esperado. Testando no Chrome mais recente (52.0.x), o diálogo .modal é centralizado corretamente, mas sua interação com o conteúdo parece congelada no local antigo (estranhamente). No entanto, você pode tentar usar essa técnica diretamente no diálogo .modal (não no .modal) e, com algumas outras propriedades, ela parece funcionar. =)
giovannipds


1

Isso funciona no BS3, não testado na v2. Centraliza o modal verticalmente. Observe que ele fará a transição para lá - se você quiser que ele apareça apenas na posição, edite a transitionpropriedade CSS para.modal-dialog

centerModal = function() {
    var $dialog = $(this).find(".modal-dialog"),
        offset = ($(window).height() - $dialog.height()) / 2;

    // Center modal vertically in window
    $dialog.css({
        'transform': 'translateY(' + offset + 'px) !important',
    });
};

$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
    $('.modal').each(centerModal);
});

1
e(document).on('show.bs.modal', function () {
        if($winWidth < $(window).width()){
            $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
        }
    });
    e(document).on('hidden.bs.modal', function () {
        $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
    });

Você poderia esclarecer qual é a função 'e' na sua resposta?
Michael Butler

1

Isso pega a resposta de Arany e faz com que funcione se o modal for mais alto que a altura da tela:

function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find(".modal-dialog");
    var offset = ($(window).height() - $dialog.height()) / 2;
    //Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
    var bottomMargin = $dialog.css('marginBottom');
    bottomMargin = parseInt(bottomMargin);
    if(offset < bottomMargin) offset = bottomMargin;
    $dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
    $('.modal:visible').each(centerModal);
});

Hey @jetlej, por que você não edita a resposta de Arany para incluir isso? Você resolve um grande erro no código dele.
pcatre

@pcatre - Eu não sabia que podia enviar edições! Obrigado por apontar isso para fora
jetlej 18/10/2014

1

Para adicionar a central vertical modal ao bootstrap modal.js, adicionei isso no final da Modal.prototype.showfunção:

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});

Não funcionará bem se a caixa de diálogo mudar de altura, uma vez mostrada, devido ao redimensionamento da página ou material dentro dela expandir / fechar.
Dirbaio 17/04

0

Para fazer o Modal verticalmente Align Middle All dialog.

/* Nota:

1. Mesmo que você não precise atribuir um seletor, ele encontrará todos os modos do documento e o tornará verticalmente no meio

2.Para evitar o meio de algum modal específico para ser o centro, você pode usar: not selector in click event

* /

 $( "[data-toggle='modal']" ).click(function(){
     var d_tar = $(this).attr('data-target'); 
     $(d_tar).show();   
     var modal_he = $(d_tar).find('.modal-dialog .modal-content').height(); 
     var win_height = $(window).height();
     var marr = win_height - modal_he;
     $('.modal-dialog').css('margin-top',marr/2);
  });

De Milão Pandya


0

Use este script simples que centraliza os modais.

Se desejar, você pode definir uma classe personalizada (por exemplo: .modal.modal-vcenter em vez de .modal) para limitar a funcionalidade apenas a alguns modais.

var modalVerticalCenterClass = ".modal";

function centerModals($element) {
    var $modals;
    if ($element.length) {
      $modals = $element;
    } else {
    $modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

Adicione também esta correção CSS para o espaçamento horizontal do modal; mostramos a rolagem nos modais, a rolagem do corpo é ocultada automaticamente pelo Bootstrap:

/* scroll fixes */
.modal-open .modal {
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-y: scroll;
}

0

Outra resposta de CSS para esta pergunta ...
Esta solução usa CSS apenas para obter o efeito desejado, mantendo a capacidade de fechar o modal clicando fora dele. Também permite que você defina .modal-contentmáximos de altura e largura para que seu pop-up não cresça além da janela de visualização. Um pergaminho aparecerá automaticamente quando o conteúdo crescer além do tamanho modal.

nota:
O Bootstrap recomendado .modal-dialog divdeve ser omitido para que isso funcione corretamente (não parece quebrar nada). Testado no Chrome 51 e IE 11.

Código CSS:

.modal {
   height: 100%;
   width: 100%;
}

.modal-content {
   margin: 0 auto;
   max-height: 600px;
   max-width: 50%;
   overflow: auto;
   transform: translateY(-50%);
}

EDIT: A .modal-dialogclasse permite que você escolha se um usuário pode ou não fechar o modal clicando fora dele. A maioria dos modais possui um botão explícito 'fechar' ou 'cancelar'. Lembre-se disso ao usar esta solução alternativa.


0

A melhor solução para centralizar seu modal com largura e altura é, em css add e em modal adicione esse 'centralize' como uma classe.

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }

0

Centralizado verticalmente Adicione .modal-dialog-centered a .modal-dialog para centralizar verticalmente o modal

Iniciar modal de demonstração

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.