Centratura verticale della finestra modale Bootstrap

Mi piacerebbe 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/

Usa un helper-div e alcuni css personalizzati. Non sono richiesti javascript o jQuery.

HTML (basato sul codice demo di Bootstrap)

    

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

Perché la risposta di gpcola non ha funzionato per me, ho modificato un po ‘così ora funziona. Ho usato “margin-top” invece di trasformare. Inoltre, io uso l’evento “show” invece di “shown” perché dopo mi ha dato un brutto salto di posizionamento (visibile quando hai le animazioni bootstrap su). Assicurati di impostare il display su “block” prima di posizionarlo, altrimenti $ dialog.height () sarà 0 e il modal non sarà centrato 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)); 

Questo è quello che ho fatto per la mia app. Se date un’occhiata alle seguenti classi nel file bootstrap.css .modal-dialog ha un padding predefinito di 10px e @media screen e (min-width: 768px) .modal-dialog ha un padding superiore impostato su 30px. Quindi nel mio file css personalizzato ho impostato il mio riempimento superiore al 15% per tutti gli schermi senza specificare la larghezza dello schermo del supporto. 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; } 
   

// 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 parola chiave !important dopo la parte superiore. Ciò impone al browser di utilizzare quel valore e ignorare qualsiasi altro valore per la parola chiave. Questo ha l’inconveniente che non è ansible sovrascrivere il valore da nessun’altra parte.

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

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

Completa l’URL dimostrativo : https://codepen.io/dimbslmh/full/mKfCc

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 solo lo stile sul modale attualmente attivo invece di tutte le modali. .in sarebbe stato grandioso, ma sembra essere aggiunto solo dopo che la transizione è stata completata, il che è troppo tardi e causa alcune transizioni davvero brutte. Fortunatamente sembra che bootstrap applichi sempre un attributo di stile sul modale proprio come sta iniziando a mostrare, quindi è un po ‘hacky, ma funziona.

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

Puoi raggiungere il centro di allineamento verticale sul modal Bootstrap 3 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 class css al contenitore “dialogo modale”

  

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

Il modo più semplice e pulito per farlo è usare Flexbox! Quanto segue allinea verticalmente un modal Bootstrap 3 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 (per solito) IE ritarda. Nel mio caso, tutti i prodotti che sviluppo per me o per i clienti sono IE10 +. (Non ha senso il business saggio 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 scoprire se Flexbox è supportato e applicare una class al corpo della pagina, ma quel livello di ingegneria front-end è piuttosto robusto e avresti ancora bisogno di un fallback.

Vorrei incoraggiare 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 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

Puoi usare:

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

per centrarlo sia verticalmente che orizzontalmente.

vantaggi:

  • contenuto modale accessibile anche quando è più alto del dispositivo
  • non usa display:table-cell (che non è pensato per i layout)
  • non richiede modifiche al markup modale Bootstrap 3 predefinito
  • il posizionamento è puro CSS. Il JS viene aggiunto per chiudere il modal al click / tap sotto e sopra di esso
  • Ho incluso lo SCSS non prefissato per coloro che usano gulp o grunt
 // 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); } } 
      

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

Nella class .modal-dialog sovrascrivendo la posizione in assoluto (da relativo) e centrando il contenuto a right:0, left: 0

In .modal.fade .modal-dialog , .modal.in .modal-dialog impostando l’animazione di transizione in top anziché su translate.

margin-top sposta il popup leggermente al di sotto del centro in caso di piccoli popup e in caso di popup lunghi, il modal è bloccato con l’intestazione. Quindi margin-top:0, margin-bottom:0

Hai bisogno di perfezionarlo ulteriormente.

Per coloro che utilizzano il bootstrap angular-ui è ansible aggiungere le seguenti classi in base alle informazioni di cui sopra:

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

 // The 3 below classs 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; } 

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 il modo in cui appare la 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 che tiene conto anche dello scroll 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 soluzione CSS sia un po ‘più pulita della soluzione di Rens de Nobel. Inoltre, questo non impedisce di chiudere la finestra di dialogo facendo clic al di fuori di essa.

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

Basta aggiungere alcune classi CSS al contenitore DIV con la class .modal-dialog per ottenere una specificità più elevata rispetto al CSS di bootstrap, ad esempio .centered.

HTML

  

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 con Flexbox.

CSS

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

Non c’è bisogno di noi javascript. Il modale di Boostrap aggiunge .in class quando appare. Basta modificare questa combinazione di classi con modalclassName.fade.in con flex css e il gioco è fatto.

aggiungi questo css per centrare il tuo modal verticalmente e orizzontalmente.

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

A partire da Bootstrap 4 è stata aggiunta la seguente class per ottenere questo risultato senza JavaScript.

 modal-dialog-centered 

Puoi trovare la loro documentazione qui .

Funziona in BS3, non testato in v2. Centra il modale verticalmente. Nota che passerà lì – se vuoi che appaia in posizione modificare la proprietà di transition 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 la fa funzionare se la modale è più alta 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 rendere Modal allineare vericamente la finestra di dialogo Medio a tutti.

/* Nota:

1. Anche se non è necessario assegnare il selettore, troverà tutte le modali dal documento e lo trasformsrà in verticale

2.Per evitare il centro, è ansible utilizzare alcune modali specifiche: non il 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

Per aggiungere il centraggio modale verticale a bootstrap modal.js l’ho aggiunto alla fine della funzione Modal.prototype.show :

 var $modalDialog = $('.modal-dialog'), modalHeight = $modalDialog.height(), browserHeight = window.innerHeight; $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2}); 
 .modal.in .modal-dialog { position: relative; top: 50%; transform: translateY(-50%); } 

Usa questo semplice script che centra le modali.

Se vuoi, puoi impostare una class personalizzata (ad esempio: .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 sulle modali, gli scroll del corpo 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 solo i CSS per ottenere l’effetto desiderato, pur mantenendo la possibilità di chiudere la modale facendo clic al di fuori di essa. Permette anche di impostare altezza e larghezza del .modal-content modo che il pop-up non cresca oltre il viewport. Una scroll apparirà automaticamente quando il contenuto cresce oltre la dimensione modale.

Nota:
Il Bootstrap raccomandato .modal-dialog div deve essere omesso affinché funzioni correttamente (non sembra che rompa nulla). Testato su 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%); } 

MODIFICA: la class .modal-dialog consente di scegliere se un utente può chiudere o meno la modale facendo clic all’esterno della modale stessa. La maggior parte delle modali ha un pulsante “chiudi” o “cancella” esplicito. Tienilo a mente quando usi questa soluzione alternativa.

La migliore soluzione per centralizzare il tuo modal con larghezza e altezza è, in css add e in modal add, questo ‘centralizza’ come una class ..

 .centralize{ position:absolute; left:50%; top:50%; background-color:#fff; transform: translate(-50%, -50%); width: 40%; //specify watever u want height: 50%; } 

dopo 4 ore ho trovato la soluzione. Centrare il modale in diverse risoluzioni (desktop, tablet, smartphone):

index.php

          

Il file bootstrap-modal-bs3patch.css l’ ho scaricato da https://github.com/jschr/bootstrap-modal

Ho quindi modificato questo file. Css come segue:

 body.modal-open, . modal-open. navbar-fixed-top, . modal-open. navbar-fixed-bottom {  margin-right: 0; } . {modal  padding: 0; } . modal.container {  max-width: none; } @ media (min-width: 768px) and (max-width: 992px) { . {modal-dialog background-color: black; position: fixed; top: 20%! important; left: 15%! important; } } @ media (min-width: 992px) and (max-width: 1300px) { . {modal-dialog background-color: red; position: fixed; top: 20%! important; left: 20%! important; } } @ media (min-width: 1300px) { . {modal-dialog background-color: # 6e7ec3; position: fixed; top: 40%! important; left: 35%! important; } } 

Ho fatto test su risoluzioni diverse e funziona !