Centratura verticale della finestra modale di Bootstrap

Vorrei centrare il mio modale sul viewport (al centro) Ho provato ad aggiungere alcune proprietà CSS

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

Sto usando questo esempio http://jsfiddle.net/rniemeyer/Wjjnd/

Provai

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

Questo fa il lavoro: http://jsfiddle.net/sRmLV/1140/

Utilizza un helper-div e alcuni CSS personalizzati. Nessun javascript o jQuery richiesto.

HTML (basato sul codice demo di 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;
}

Poiché la risposta di gpcola non ha funzionato per me, ho modificato un po 'quindi ora funziona. Ho usato "margin-top" invece di trasformare. Inoltre, utilizzo l'evento "show" invece di "mostrato" perché dopo mi ha dato un brutto salto di posizionamento (visibile quando sono presenti animazioni bootstrap). Assicurati di impostare il display su "blocco" prima del posizionamento, altrimenti $ dialog.height () sarà 0 e il modale non sarà completamente centrato.

(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));

Questo è quello che ho fatto per la mia app. Se dai un'occhiata alle seguenti classi nel file bootstrap.css .modal-dialog ha un'imbottitura predefinita di 10px e schermo @media e (larghezza minima: 768px) .modal-dialog ha un'imbottitura superiore impostata su 30px. Quindi nel mio file css personalizzato ho impostato il mio riempimento superiore al 15% per tutte le schermate senza specificare una larghezza dello schermo multimediale. Spero che questo ti aiuti.

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

Il modo migliore che ho trovato per tutti i browser HTML5:

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

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

<!-- 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>

// Stili

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

Il parametro top viene sovrascritto in .modal.fade.in per forzare il valore impostato nella dichiarazione personalizzata, aggiungere la !importantparola chiave dopo top. Ciò impone al browser di utilizzare quel valore e ignora qualsiasi altro valore per la parola chiave. Questo ha lo svantaggio di non poter sovrascrivere il valore altrove.

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

A partire da Bootstrap 4 è stata aggiunta la seguente classe per raggiungere questo obiettivo senza JavaScript.

modal-dialog-centered

Puoi trovare la loro documentazione qui .

Grazie a vd per aver sottolineato, è necessario aggiungere entrambi .modal-dialog-centered a .modal-dialog per centrare verticalmente il modale.

questo funziona perfettamente per me:

.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 demo completo : https://codepen.io/dimbslmh/full/mKfCc

Puoi usare:

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

per centrarlo sia in verticale che in orizzontale.

Perché la maggior parte della risposta qui non ha funzionato o ha funzionato solo parzialmente:

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

Devi usare il selettore [stile] per applicare lo stile solo sul modale attualmente attivo anziché su tutti i modali. .insarebbe stato grandioso, ma sembra essere aggiunto solo dopo il completamento della transizione, che è troppo tardi e rende alcune transizioni davvero sbagliate. Fortunatamente sembra che bootstrap applichi sempre un attributo di stile sul modale proprio come sta iniziando a mostrare, quindi questo è un po 'confuso, ma funziona.

La :not([style='display: none;'])parte è una soluzione alternativa a bootstrap che non rimuove correttamente l'attributo style e imposta invece la visualizzazione dello stile su none quando si chiude la finestra di dialogo.

È possibile ottenere un centro di allineamento verticale su Bootstrap 3 modale in questo modo:

.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 aggiungi questa classe css al contenitore "modal-dialog"

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

Esempio di lavoro di jsFiddle: http://jsfiddle.net/U4NRx/

Il modo più semplice e pulito per farlo è usare Flexbox! Quanto segue allineerà verticalmente un Bootstrap 3 modale al centro dello schermo ed è molto più pulito e semplice di tutte le altre soluzioni pubblicate qui:

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

NOTA: sebbene questa sia la soluzione più semplice, potrebbe non funzionare per tutti a causa del supporto del browser: http://caniuse.com/#feat=flexbox

Sembra (al solito) IE in ritardo. Nel mio caso, tutti i prodotti che sviluppo per me o per i clienti sono IE10 +. (non ha senso saggiamente investire tempo di sviluppo a supporto delle versioni precedenti di IE quando potrebbe essere utilizzato per sviluppare effettivamente il prodotto e far uscire l'MVP più velocemente). Questo non è certamente un lusso che tutti hanno.

Ho visto siti più grandi rilevare se Flexbox è supportato o meno e applicare una classe al corpo della pagina, ma quel livello di ingegneria front-end è piuttosto robusto e avresti comunque bisogno di un fallback.

Incoraggerei le persone ad abbracciare il futuro del web. Flexbox è fantastico e dovresti iniziare a usarlo se puoi.

PS: questo sito mi ha davvero aiutato a comprendere il flexbox nel suo insieme e ad applicarlo a qualsiasi caso d'uso: http://flexboxfroggy.com/

EDIT: nel caso di due modali su una pagina, questo dovrebbe applicarsi a .modal.in

vantaggi:

• contenuti modali accessibili anche quando più alti del dispositivo
• non usa display:table-cell(non è pensato per i layout)
• non richiede alcuna modifica al Bootstrap 3 modale predefinito markup
• il posizionamento è puro CSS. Il JS viene aggiunto per chiudere il modale facendo clic / toccando sotto e sopra di esso
• Ho incluso il non prefisso SCSSper coloro che usano gulpogrunt

// closes the modal on click/tap below/above the modal

$('.modal-dialog').on('click tap', function(e){
    if (e.target.classList.contains('modal-dialog')) {
    $('.modal').modal('hide');
  }
})

.modal-dialog {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: auto;
  min-height: -webkit-calc(100vh - 60px);
  min-height: -moz-calc(100vh - 60px);
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: -webkit-calc(100vh - 20px);
    min-height: -moz-calc(100vh - 20px);
    min-height: calc(100vh - 20px);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


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

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</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>

Nota : intendo mantenere aggiornata questa risposta con le ultime specifiche di Bootstrap 3. Per una soluzione Bootstrap 4, vedi questa risposta (per ora sono più o meno gli stessi, ma col tempo potrebbero divergere). Se trovi qualche bug o problema con esso, fammi sapere e aggiornerò. Grazie.

Pulito, senza prefisso SCSS(per l'uso con 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);
  }
}

Ancora un'altra soluzione CSS. Non funziona per i popup più grandi della porta di visualizzazione.

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

In .modal-dialogclasse sovrascrivendo la posizione in assoluto (dal relativo) e centrando il contenutoright:0, left: 0

Nel .modal.fade .modal-dialog , .modal.in .modal-dialogimpostare l'animazione di transizione topanziché su tradurre.

margin-topsposta il popup leggermente al di sotto del centro in caso di popup piccoli e in caso di popup lunghi, il modale è bloccato con l'intestazione. Quindimargin-top:0, margin-bottom:0

È necessario perfezionarlo ulteriormente.

Per coloro che usano bootstrap angular-ui possono aggiungere le seguenti classi in base alle informazioni sopra:

Nota: non sono necessarie altre modifiche e risolverà tutte le modali.

// 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;
}

Non c'è bisogno di noi javascript. Boostrap modal aggiunge .in class quando appare. Basta modificare questa combinazione di classe con modalclassName.fade.in con flex css e il gioco è fatto.

aggiungi questo css per centrare il tuo modale in verticale e in orizzontale.

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

La mia scelta, solo un po 'di CSS: (NON funziona in 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;
}

Puoi giocare con la prima regola per cambiare l'aspetto del modale.

Utilizzo: Bootstrap 3.3.4

Basta aggiungere il seguente CSS a quello esistente, Funziona bene per me

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

Basato sulla risposta di Arany , ma anche tenendo conto dello scorrimento della pagina.

(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));

Penso che questa sia una soluzione CSS un po 'più pulita della soluzione di Rens de Nobel. Inoltre, ciò non impedisce di chiudere la finestra di dialogo facendo clic all'esterno di essa.

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

Basta aggiungere una classe CSS al contenitore DIV con la classe .modal-dialog per ottenere una specificità superiore rispetto al CSS bootstrap, ad esempio .centered.

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 rendi questo contenitore .modal-dialog.centered fisso e posizionato correttamente.

CSS

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

O ancora più semplice usando flexbox.

CSS

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

Funziona in BS3, non testato in v2. Centra il modale in verticale. Nota che passerà lì - se vuoi che appaia in posizione modifica la transitionproprietà CSS per.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);
});

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)
    });

Questo prende la risposta di Arany e lo fa funzionare se il modale è più alto dell'altezza dello schermo:

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);
});

Per aggiungere il centraggio modale verticale a bootstrap modal.js ho aggiunto questo alla fine della Modal.prototype.showfunzione:

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

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

Per rendere Modale in verità Allinea al centro tutto il dialogo.

/* Nota:

1.Anche se non è necessario assegnare un selettore, troverà tutto il modale dal documento e lo renderà verticalmente centrale

2.Per evitare il centro di alcuni modali specifici per essere al centro puoi usare: non selettore nell'evento click

* /

 $( "[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);
  });

Da Milano Pandya

Usa questo semplice script che centra i modali.

Se lo desideri, puoi impostare una classe personalizzata (es: .modal.modal-vcenter anziché .modal) per limitare la funzionalità solo ad alcune modali.

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);

Aggiungi anche questa correzione CSS per la spaziatura orizzontale del modale; mostriamo lo scroll sui modali, i body scroll sono nascosti automaticamente da Bootstrap:

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

Un'altra risposta CSS a questa domanda ...
Questa soluzione utilizza CSS solo per ottenere l'effetto desiderato pur mantenendo la possibilità di chiudere il modale facendo clic all'esterno di esso. Ti consente anche di impostare i .modal-contentmassimi in altezza e larghezza in modo che il tuo pop-up non cresca oltre la finestra. Una scorrimento apparirà automaticamente quando il contenuto cresce oltre le dimensioni modali.

nota:
il Bootstrap raccomandato .modal-dialog divdovrebbe essere omesso affinché questo funzioni correttamente (non sembra interrompere nulla). Testato in Chrome 51 e IE 11.

Codice CSS:

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

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

EDIT: la .modal-dialogclasse ti consente di scegliere se un utente può o meno chiudere il modale facendo clic al di fuori del modale stesso. La maggior parte dei modali ha un pulsante esplicito 'chiudi' o 'annulla'. Tienilo a mente quando usi questa soluzione alternativa.

La migliore soluzione per centralizzare il tuo modale con larghezza e altezza è, in css aggiungere e in modale aggiungere questo 'centralizzare' come una classe.

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

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

Centrato verticalmente Aggiungi .modal-dialog-centered a .modal-dialog per centrare verticalmente il modale

Avvia la demo modale

<!-- 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>