Centro de posição vertical modal do Bootstrap 3

270

Esta é uma questão de duas partes:

  1. Como você pode posicionar o modal verticalmente no centro quando não sabe a altura exata do modal?

  2. É possível ter o modal centralizado e ter excesso: auto no corpo modal, mas apenas se o modal exceder a altura da tela?

Eu tentei usar isso:

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

Isso me dá o resultado necessário quando o conteúdo é muito maior que o tamanho da tela vertical, mas para conteúdos modais pequenos é praticamente inutilizável.

patinete
fonte
1
@Heiken por alguma razão isso me faz pular na tela, Im usando cromo
Sven van den Boogaart

Respostas:

374
.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;
}

E ajuste um pouco a classe .fade para garantir que apareça fora da borda superior da janela, em vez do centro

Finik
fonte
Na verdade, eu estava substituindo isso por engano, obrigado por apontar que realmente funciona nos bastidores.
Dorian
Essa provavelmente é a melhor maneira de centralizar verticalmente não apenas o modal de inicialização, mas tudo o mais. css-tricks.com/centering-in-the-unknown
Mark S
4
Esclareço que isso não funciona muito bem no celular. Porque a definição ": after" tem uma altura de 100% e pode mover automaticamente o modal para baixo da página. Acabei de resolver declarar .modal {display: flex! Importante;} .modal-dialog {margin: auto}. Os 92,97% das pessoas já têm suporte para usar essa propriedade CSS, no entanto, para o suporte geral, pode usar JavaScript para definir as margens.
Walter Chapilliquen - wZVanG
21
Absolutamente ótimo, mas eu recomendaria usá-lo apenas acima de 768px e deixar a configuração padrão no celular. A posição superior é melhor para os modais quando a altura da tela é pequena. Eu também ajustada uma animação para fazer parecer do centro, aqui o exemplo de trabalho, se alguém precisa dele: codepen.io/anon/pen/zGBpNq
bwitkowicz
Essa solução muda a janela modal para a direita para 2px, causa: elemento antes. Mas isso pode ser resolvido adicionando o mesmo código para: after
Cypher
146

1. Como você pode posicionar o modal verticalmente no centro quando não sabe a altura exata do modal?

Para centralizar absolutamente o Modal do Bootstrap 3 sem declarar uma altura, você primeiro precisará sobrescrever o CSS do Bootstrap adicionando isso à sua folha de estilos:

.modal-dialog-center { /* Edited classname 10/03/2014 */
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
}

Isso posicionará o canto superior esquerdo das caixas de diálogo modais no centro da janela.

Temos que adicionar essa consulta de mídia ou a margem esquerda modal está incorreta em pequenos dispositivos:

@media (max-width: 767px) {
  .modal-dialog-center { /* Edited classname 10/03/2014 */
    width: 100%;
  }
} 

Agora precisaremos ajustar sua posição com JavaScript. Para isso, atribuímos ao elemento uma margem superior e esquerda negativa igual à metade de sua altura e largura. Neste exemplo, usaremos o jQuery, pois ele está disponível no Bootstrap.

$('.modal').on('shown.bs.modal', function() {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return -($(this).outerHeight() / 2);
        },
        'margin-left': function () {
            return -($(this).outerWidth() / 2);
        }
    });
});

Atualização (01/10/2015):

Adicionando a resposta de Finik . Créditos à Centralização no Desconhecido .

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

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

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

Observe a margem negativa, certo? Isso remove o espaço adicionado pelo bloco embutido. Esse espaço faz com que o modal pule para a parte inferior da página @media width <768px.

2. É possível ter o modal centrado e ter excesso: auto no corpo modal, mas apenas se o modal exceder a altura da tela?

Isso é possível fornecendo ao corpo modal um estouro-y: auto e uma altura máxima. Isso leva um pouco mais de trabalho para fazê-lo funcionar corretamente. Comece adicionando isso à sua folha de estilos:

.modal-body {
    overflow-y: auto;
}
.modal-footer {
    margin-top: 0;
}

Usaremos o jQuery novamente para obter a altura da janela e definir a altura máxima do conteúdo modal primeiro. Então temos que definir a altura máxima do corpo modal, subtraindo o conteúdo modal com o cabeçalho modal e o rodapé modal:

$('.modal').on('shown.bs.modal', function() {
    var contentHeight = $(window).height() - 60;
    var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
    var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;

    $(this).find('.modal-content').css({
        'max-height': function () {
            return contentHeight;
        }
    });

    $(this).find('.modal-body').css({
        'max-height': function () {
            return (contentHeight - (headerHeight + footerHeight));
        }
    });

    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return -($(this).outerHeight() / 2);
        },
        'margin-left': function () {
            return -($(this).outerWidth() / 2);
        }
    });
});

Você pode encontrar uma demonstração de trabalho aqui com o Bootstrap 3.0.3: http://cdpn.io/GwvrJ EDIT: eu recomendo usar a versão atualizada em vez de uma solução mais responsiva: http://cdpn.io/mKfCc

Atualização (30/11/2015):

function setModalMaxHeight(element) {
  this.$element     = $(element);  
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() < 768 ? 20 : 60;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

(Atualizado em 30/11/2015 http://cdpn.io/mKfCc com a edição acima)

dimbslmh
fonte
1
excelente resposta e post! No entanto, isso também pode ser animado? Funciona muito bem quando aparece, mas e a animação? Estou no trabalho e não pode testá-lo atm, mas estou ansioso para ver os resultados
scooterlord
Você pode adicionar uma classe fade no modal. Confira minha solução atualizada em cdpn.io/mKfCc
dimbslmh
Embora pareça estar funcionando muito bem no codepen, não consigo fazê-lo funcionar no meu projeto. Eu acho que você só precisa adicionar o código e não substituir algo certo?
scooterlord
1
Olá de novo! Notou o seguinte. Quando o primeiro modal é aberto pela primeira vez, a margem certa fica errada até você redimensionar uma vez. Algum ides neste?
scooterlord
1
@bernie Fiz capturas de tela no Browserstack com um fork do meu codepen, que tem o curto modal aberto em document.ready: browserstack.com/screenshots/… O Browserstack não suporta a versão v9.3.x (ainda), mas acho que algo semelhante ao que você descreveu ocorre no iOS 6.0 (consulte a captura de tela iPad 3rd (6.0) (Retrato)). Talvez seja um bug antigo que retornou na v9.3.2. Se desejar, você pode registrar um relatório de erro em forums.developer.apple.com/community/safari-and-web/…
dimbslmh 3/16/16
37

Minha solução

.modal-dialog-center {
    margin-top: 25%;
}

    <div id="waitForm" class="modal">
        <div class="modal-dialog modal-dialog-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="headerBlock" class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <span id="bodyBlock"></span>
                    <br/>
                    <p style="text-align: center">
                        <img src="@Url.Content("~/Content/images/progress-loader.gif")" alt="progress"/>
                    </p>   
                </div>
            </div>
        </div>
    </div>
Brian J. Hakim
fonte
Você deve usar o estofamento. margem interromperá a ação de fechamento quando você clicar na sobreposição
anvd
2
A margem superior definida para 25% exige que o modal tenha 50% de altura.
rebelião
28

Pode simplesmente ser reparado com display: flex

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal.fade .modal-dialog {
  transform: translate(0, -100%);
}

.modal.in .modal-dialog {
  transform: translate(0, 0);
}

Com prefixo

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
Mo.
fonte
2
Isso evita que o pano de fundo seja clicado devido à altura de 100vh. É bom para as configurações "pano de fundo: 'estático'".
Ianstigator
esta causa fade out questão animação
Viswanath Lekshmanan
23

Eu vim com uma solução css pura! No entanto, é css3, o que significa que o ie8 ou inferior não é suportado, mas, além disso, foi testado e funciona no ios, android, ie9 +, chrome, firefox, safari para desktop ..

Estou usando o seguinte css:

.modal-dialog {
  position:absolute;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 5%;
  width:90%;
  height:80%;
}
.modal-content {
  min-height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
}
.modal-body {
  position:absolute;
  top:45px; /** height of header **/
  bottom:45px;  /** height of footer **/
  left:0;
  right:0;
  overflow-y:auto;
}
.modal-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

Aqui está um violino. http://codepen.io/anon/pen/Hiskj

..selecionando isso como a resposta correta, já que não há javascript extra pesado que ajoelha o navegador no caso de mais de um modal.

patinete
fonte
8
O objetivo principal do uso do JavaScript era obter a altura desconhecida do modal. Sua solução tem uma altura fixa de 80%, o que não responde à sua própria pergunta: "Como você pode posicionar o modal verticalmente no centro quando não sabe a altura exata do modal ?"
dimbslmh
... a dimensão da altura está definida para limitar a altura modal MÁXIMA em comparação com a altura da tela. No entanto, a porcentagem de conversão é definida de acordo com a altura do CONTEÚDO.
scooterlord
3
Se você deseja obter uma solução que não altera o tamanho da caixa modal tente o seguinte solução css bem: tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal
klickagent.ch
Muito bom também. No entanto, ele tem uma abordagem diferente da que estou descrevendo. No seu caso, todo o modal se move para cima e para baixo, quando, no meu caso, um elemento transbordado é criado. Muito bom! Eu gosto disso!
Scooterlord 30/05
Isso requer que a altura seja definida. O que não é exatamente o mesmo que o usuário solicita.
rebelião
21

Se você concorda com o uso do flexbox, isso deve ajudar a resolvê-lo.

.modal-dialog {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.modal-content {
  margin: 0 auto;
}
xiaolin
fonte
7
Descobri que essa resposta funciona muito bem para mim. No entanto, se você deseja permitir que os usuários fechem um modal clicando em seu pano de fundo, adicione-o pointer-events: nonea .modal-dialoge pointer-events: autopara .modal-content. O Becausu .modal-dialog {height: 100%}cobre toda a coluna acima e abaixo de um modal e desativa os usuários a clicar no pano de fundo nessa área.
wuct
combinada com a sugestão de @ChingTingWu, mais eficaz
Strider
E onde está a sugestão do @ChingTingWu?
Giovannipds
1
ChingTingWu parece ter mudado para @wuct
xiaolin
1
@giovannipds Ops, renomeei meu nome de usuário, porque é mais curto e fácil de ser marcado. Desculpe por confundir :)
wuct
20

Minha solução:

.modal.in .modal-dialog 
{
    -webkit-transform: translate(0, calc(50vh - 50%));
    -ms-transform: translate(0, 50vh) translate(0, -50%);
    -o-transform: translate(0, calc(50vh - 50%));
    transform: translate(0, 50vh) translate(0, -50%);
}
Vadim
fonte
Isso parece funcionar perfeitamente com o Bootstrap 3. Por que essa não é a resposta aceita? É muito mais simples (4 diretivas css) do que as outras.
Danielricecodes
@danielricecodes Vou tentar e supor que é por causa dos problemas com as unidades de janela de visualização. . A resposta proposta pelo scooterlord propôs compatibilidade mesmo com o IE9 e os iOs, o que me sugere é uma preocupação. Se você verificar a página de problemas do canIuse, verá que há problemas com iOs e IE10 e versões anteriores. Não que eu concorde ou não que esta seja a resposta correta. Estou apenas apontando por que talvez isso não tenha sido selecionado como resposta.
Malavos
1
Há um problema com esta abordagem é quando o modal tem conteúdo de rolagem (mais conteúdo do que se encaixa na janela)
Steven Pribilinskiy
Essa deve ser a resposta aceita. Até agora, esta é a única solução que funciona para mim. Obrigado por isso.
shifu 5/09/18
Isso não vai funcionar se o seu conteúdo modal é maior do que a altura da tela (se o modal tem de rolagem)
Brett Gregson
18

Tudo o que fiz no meu caso é definir o Top no meu CSS sabendo a altura do modal

<div id="myModal" class="modal fade"> ... </div>

no meu css eu defino

#myModal{
    height: 400px;
    top: calc(50% - 200px) !important;
}
Nerdroid
fonte
1
Como um noob para css, esta resposta parecia o menos assustador e começou o trabalho feito
Oded Ben Dov
2
Isso não responde à primeira parte da pergunta: "..quando você não conhece a altura exata do modal?"
Natec
15

Adicionar este css simples também funciona.

.modal-dialog {
  height: 100vh !important;
  display: flex;
}

.modal-content {
  margin: auto !important;
  height: fit-content !important;
}
Ninja420
fonte
O que é o conteúdo adequado?
Marc Roussel
12

Existe uma maneira mais fácil de fazer isso usando o css:

.modal-dialog {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width:500px;
    height:300px;
}

É isso aí. Observe que ele só precisa ser aplicado ao.modal-dialog div contêiner.

Demonstração: https://jsfiddle.net/darioferrer/0ueu4dmy/

Dario Ferrer
fonte
7
Não responde no celular devido à largura e altura fixas.
Ianstigator 17/10/19
Sua resposta assume que todos os dispositivos têm a mesma resolução de tela
Patricio Rossi
Nenhum homem. Suponho que você entendeu esse exemplo e é capaz de adaptá-lo a cada caso.
Dario Ferrer
No Bootstrap v3.3.0, execute com êxito, obrigado
Amin Ghaderi
11

Expandindo a excelente resposta de @ Finik, essa correção é aplicada apenas a dispositivos não móveis. Eu testei no IE8, Chrome e Firefox 22 - ele funciona com conteúdo muito longo ou curto.

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

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

A solução mais universal que escrevi. Dinamicamente calcula com a altura do diálogo. (O próximo passo pode ser o recálculo da altura das caixas de diálogo no redimensionamento da janela.)

JSfiddle: http://jsfiddle.net/8Fvg9/3/

// initialise on document ready
jQuery(document).ready(function ($) {
    'use strict';

    // CENTERED MODALS
    // phase one - store every dialog's height
    $('.modal').each(function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            fadeClass = (t.is('.fade') ? 'fade' : '');
        // render dialog
        t.removeClass('fade')
            .addClass('invisible')
            .css('display', 'block');
        // read and store dialog height
        d.data('height', d.height());
        // hide dialog again
        t.css('display', '')
            .removeClass('invisible')
            .addClass(fadeClass);
    });
    // phase two - set margin-top on every dialog show
    $('.modal').on('show.bs.modal', function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            dh = d.data('height'),
            w = $(window).width(),
            h = $(window).height();
        // if it is desktop & dialog is lower than viewport
        // (set your own values)
        if (w > 380 && (dh + 60) < h) {
            d.css('margin-top', Math.round(0.96 * (h - dh) / 2));
        } else {
            d.css('margin-top', '');
        }
    });

});
Jan Renner
fonte
7

Encontre a solução perfeita a partir daqui

$(function() {
    function reposition() {
        var modal = $(this),
            dialog = modal.find('.modal-dialog');
        modal.css('display', 'block');

        // Dividing by two centers the modal exactly, but dividing by three 
        // or four works better for larger screens.
        dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
    }
    // Reposition when a modal is shown
    $('.modal').on('show.bs.modal', reposition);
    // Reposition when the window is resized
    $(window).on('resize', function() {
        $('.modal:visible').each(reposition);
    });
});
Ismail Farooq
fonte
1
Obrigado. Perfeito para mim com uma alteração: dialog.css ("margin-top", Math.max (0, ($ (document) .scrollTop () + (($ (window) .height () - dialog.height ()))) / 2))));
Viacheslav Soldatov
4
$('#myModal').on('shown.bs.modal', function() {
    var initModalHeight = $('#modal-dialog').outerHeight(); //give an id to .mobile-dialog
    var userScreenHeight = $(document).outerHeight();
    if (initModalHeight > userScreenHeight) {
        $('#modal-dialog').css('overflow', 'auto'); //set to overflow if no fit
    } else {
        $('#modal-dialog').css('margin-top', 
        (userScreenHeight / 2) - (initModalHeight/2)); //center it if it does fit
    }
});
Ray Suelzer
fonte
Com alguns ajustes nos seletores, isso funcionou como um encanto. @$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
juliangonzalez
4

Aqui está outro método único de css que funciona muito bem e é baseado nisso: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

sass:

.modal {
    height: 100%;

    .modal-dialog {
        top: 50% !important;
        margin-top:0;
        margin-bottom:0;
    }

    //keep proper transitions on fade in
    &.fade .modal-dialog {
        transform: translateY(-100%) !important;
    }
    &.in .modal-dialog {
        transform: translateY(-50%) !important;
    }
}
phazei
fonte
Tal como acontece com outras transformsoluções as arestas de emissão quando o modal tem conteúdo de rolagem (mais conteúdo do que se encaixa na janela)
Steven Pribilinskiy
3

Eu baixei o bootstrap3-dialog a partir do link abaixo e modifiquei a função aberta no bootstrap-dialog.js

https://github.com/nakupanda/bootstrap3-dialog

Código

open: function () {
            !this.isRealized() && this.realize();
            this.updateClosable();
            //Custom To Vertically centering Bootstrap 
            var $mymodal = this.getModal();
            $mymodal = $mymodal.append('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle" class="centerModal"></td></tr></table>');
            $mymodal = $mymodal.find(".modal-dialog").appendTo($mymodal.find(".centerModal"));
            //END
            this.getModal().modal('show');
            return this;
        }

Css

.centerModal .modal-header{
    text-align:left;
}
.centerModal .modal-body{
    text-align:left;
} 
user3085452
fonte
Aqui está uma modificação que pode ser aplicada em seu próprio código, sem precisar alterar a fonte original do BSDialog: gist.github.com/mahemoff/8ff6d3782d2da6f9cbb3 (apenas algumas modificações no JS, também está escrito em Coffee, mas você entendeu).
Mahemoff # 22/14
3

Isso funciona 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;
}
Liam
fonte
2

Tente algo como isto:

.popup__overlay {
    position: fixed;
    left:  0;
    top:  0;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center
    }
.popup {
    display: inline-block;
    vertical-align: middle
    } 
Sergey Briskin
fonte
1
Isso poderia funcionar muito bom, mas os modais de bootstrap ter absolutos, dentro fixo, dentro desta e que ...: /
scooterlord
1
O que essas classes têm a ver com os modais Bootstrap / Bootstrap?
Lofihelsinki 17/0518
1

Você pode conferir esta coleção de métodos para centralizar absoluta uma div: http://codepen.io/shshaw/full/gEiDt

Sevron
fonte
1
Hm, ele diz que nos caveeats que você tem que altura declarar, que não é o que eu estou procurando
scooterlord
1

Uma maneira simples. Trabalhe para mim. Thks rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/

<style>
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.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;
}
</style>
<!-- Button trigger modal -->
<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>    
Tuyen Cao
fonte
1

mais uma solução que definirá uma posição válida para cada modal visível no window.resizeevento e no show.bs.modal:

(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);
lenybernard
fonte
1
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);
user3477026
fonte
1

Eu sei que é um pouco tarde, mas estou adicionando uma nova resposta para que ela não se perca na multidão. É uma solução de navegador móvel para desktops que funciona em todos os lugares corretamente, como deveria.

Ele só precisa modal-dialogser agrupado dentro de uma modal-dialog-wrapclasse e precisa ter as seguintes adições de código:

.modal-dialog-wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.modal-dialog {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.modal-content {
  display: inline-block;
  text-align: left;
}

A caixa de diálogo começa centralizada e, nos casos de conteúdo grande, simplesmente cresce verticalmente até que uma barra de rolagem seja exibida.

Aqui está um violino de trabalho para o seu prazer!

https://jsfiddle.net/v6u82mvu/1/

patinete
fonte
1

Isso é bastante antigo e pede especificamente uma solução usando o Bootstrap 3, mas para quem se pergunta: a partir do Bootstrap 4, há uma solução interna chamada .modal-dialog-centered. Aqui está o problema: https://github.com/twbs/bootstrap/issues/23638

Então, usando a v4, você só precisa adicionar .modal-dialog-centeredpara .modal-dialogcentralizar verticalmente o modal:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- 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>
Tobold
fonte
0

Considere usar o plug-in bootstrap-modal encontrado aqui - https://github.com/jschr/bootstrap-modal

O plugin irá centralizar todos os seus modais

Jeremy Lynch
fonte
... infelizmente eu tentei isso, mas não consegui fazê-lo funcionar corretamente - pelo menos não com o MEU código. Eu acho que todo mundo precisa personalizar isso para as suas necessidades! Obrigado pela resposta embora.
Scooterlord
0

Para a centralização, não entendo o que há com as soluções excessivamente complicadas. O bootstrap já o centraliza horizontalmente para você, para que você não precise mexer com isso. Minha solução é apenas definir uma margem superior usando apenas o jQuery.

$('#myModal').on('loaded.bs.modal', function() {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2));
        }
    });
});

Usei o evento loaded.bs.modal enquanto carregava remotamente o conteúdo e, usando o evento mostrado.ba.modal, o cálculo da altura está incorreto. É claro que você pode adicionar um evento para a janela que está sendo redimensionada se precisar que ela seja responsiva.

Scott Flack
fonte
se o modal é grande o suficiente, ele pode causar problemas
scooterlord
0

Maneira muito fácil de alcançar esse conceito e você terá modal sempre no modo de tela por css como fllow: http://jsfiddle.net/jy0zc2jc/1/

você precisa apenas modalclassificar a exibição como tabela seguindo css:

display:table

e modal-dialogcomodisplay:table-cell

veja o exemplo completo de trabalho em determinado violino

Innodel
fonte
Eu não vejo um modal de todos
ThaDafinser 1/15/15
A única coisa que eu ver (no Google Chrome) é um ícone de cruz vermelha e o pano de fundo
ThaDafinser
Não scrollabel quando o modal tem mais conteúdo do que se encaixa na janela
Steven Pribilinskiy
0

não é tão complicado.

por favor tente isto:

$(document).ready(function(){
    var modalId = "#myModal";
    resize: function(){
            var new_margin = Math.ceil(($(window).height() - $(modalId).find('.modal-dialog').height()) / 2);
            $(modalId).find('.modal-dialog').css('margin-top', new_margin + 'px');
    }
    $(window).resize(function(){
        resize();
    });
    $(modalId).on('shown.bs.modal', function(){
        resize();
    });
});
Mr. Sun Lin
fonte
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;
}
Rakesh Vadnal
fonte
0

No formulário móvel, pode parecer um pouco diferente, aqui está o meu código.

<div class="modal-container">
  <style>
  .modal-dialog{
    margin-top: 60%;
    width:80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 100%
  }
  @media screen and (orientation:landscape){
    .modal-dialog{
      margin-top: 70;
      width:80%;
      margin-left: 10%;
      margin-right: 10%;
      margin-bottom: 100%
    }
  }
  .modal-body{
    text-align: center;
  }
  .modal-body p{
    margin:14px 0px;
    font-size: 110%;
  }
  .modal-content{
    border-radius: 10px;
  }
  .modal-footer{
    padding:0px;
  }
  .modal-footer a{
    padding: 15px;
  }
  .modal-footer a:nth-child(1){
    border-radius: 0px 0px 0px 10px;
  }
  .modal-footer a:nth-child(2){
    border-radius: 0px 0px 10px 0px;
  }
  </style>
  <h2>Basic Modal Example</h2>
  <div data-toggle="modal" data-target="#myModal">Div for modal</div>
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <p>确定要取消本次订单嘛?</p>
          </div>
          <div class="modal-footer">
            <div class="btn-group btn-group-justified">
              <a href="#" class="btn btn-default" data-dismiss="modal">取消</a>
              <a href="#" class="btn btn-default" data-dismiss="modal">确定</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
Marciano2049
fonte