Bootstrap 3 centro modale posizione verticale


270

Questa è una domanda in due parti:

  1. Come puoi posizionare il modale verticalmente al centro quando non conosci l'altezza esatta del modale?

  2. È possibile avere il modale centrato e avere l'overflow: auto nel corpo modale, ma solo se il modale supera l'altezza dello schermo?

Ho provato a usare questo:

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

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

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

Questo mi dà il risultato di cui ho bisogno quando il contenuto è molto più grande della dimensione dello schermo verticale, ma per piccoli contenuti modali è praticamente inutilizzabile.


1
@Heiken per qualche motivo questo mi fa saltare sullo schermo, sto usando Chrome
Sven van den Boogaart

Risposte:


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 regola un po 'la classe .fade per assicurarti che appaia dal bordo superiore della finestra, anziché dal centro


In realtà lo stavo scavalcando per errore, grazie per aver sottolineato che in realtà funziona dietro le quinte.
Dorian,

Questo probabilmente è il modo migliore per centrare verticalmente non solo il bootstrap modale ma tutto il resto. css-tricks.com/centering-in-the-unknown
Mark S

4
Chiarisco che questo non funziona molto bene su dispositivi mobili. Perché la definizione ": after" ha un'altezza del 100% e può spostare automaticamente il modale verso il basso della pagina. Ho appena risolto dichiarando .modal {display: flex! Importante;} .modal-dialog {margin: auto}. Il 92,97% delle persone supporta già l'utilizzo di questa proprietà CSS, tuttavia per il suporte generale è possibile utilizzare JavaScript per impostare i margini.
Walter Chapilliquen - wZVanG,

21
Assolutamente fantastico, ma consiglierei di usarlo solo sopra i 768 px e di lasciare le impostazioni predefinite sul cellulare. La posizione più alta è ideale per i modali quando l'altezza dello schermo è piccola. Ho anche modificato un'animazione per farla apparire dal centro, qui l'esempio funzionante se qualcuno ne ha bisogno: codepen.io/anon/pen/zGBpNq
bwitkowicz,

Questa soluzione sposta la finestra modale a destra per 2px, causa: prima dell'elemento. Ma questo può essere risolto aggiungendo lo stesso codice per: after
Cypher

146

1. Come puoi posizionare il modale verticalmente al centro quando non conosci l'altezza esatta del modale?

Per centrare in modo assoluto Bootstrap 3 Modal senza dichiarare un'altezza, dovrai prima sovrascrivere il CSS Bootstrap aggiungendolo al foglio di stile:

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

Ciò posizionerà l'angolo superiore sinistro della finestra di dialogo modale al centro della finestra.

Dobbiamo aggiungere questa media query oppure il margine modale a sinistra è errato su piccoli dispositivi:

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

Ora dovremo adattare la sua posizione con JavaScript. Per fare ciò diamo all'elemento un margine superiore e sinistro negativo pari alla metà della sua altezza e larghezza. In questo esempio useremo jQuery poiché è disponibile con 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);
        }
    });
});

Aggiornamento (01/10/2015):

Aggiungendo la risposta di Finik . Crediti a Centering in the Unknown .

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

Notare il margine negativo giusto? Ciò rimuove lo spazio aggiunto dal blocco inline. Questo spazio fa sì che il modale salti in fondo alla pagina @media larghezza <768px.

2. È possibile avere il modale centrato e avere un overflow: auto nel corpo modale, ma solo se il modale supera l'altezza dello schermo?

Questo è possibile dando al modale un overflow-y: auto e un'altezza massima. Questo richiede un po 'più di lavoro per farlo funzionare correttamente. Inizia aggiungendo questo al tuo foglio di stile:

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

Useremo di nuovo jQuery per ottenere l'altezza della finestra e impostare prima l'altezza massima del contenuto modale. Quindi dobbiamo impostare l'altezza massima del corpo modale, sottraendo il contenuto modale con l'intestazione modale e il footer modale:

$('.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);
        }
    });
});

Puoi trovare una demo funzionante qui con Bootstrap 3.0.3: http://cdpn.io/GwvrJ EDIT: consiglio invece di utilizzare la versione aggiornata per una soluzione più reattiva: http://cdpn.io/mKfCc

Aggiornamento (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'));
  }
});

(Aggiornato il 30/11/2015 http://cdpn.io/mKfCc con la modifica sopra)


1
risposta e post eccellenti! Tuttavia, anche questo può essere animato? Funziona benissimo quando entra, ma per quanto riguarda l'animazione? Sono al lavoro e non posso provarlo, ma non vedo l'ora di vedere i risultati
scooterlord

È possibile aggiungere una classe di dissolvenza sul modale. Scopri la mia soluzione aggiornata su cdpn.io/mKfCc
dimbslmh

Anche se sembra funzionare alla grande su codepen, non riesco a farlo funzionare sul mio progetto. Immagino che devi solo aggiungere il codice e non sostituire qualcosa di giusto?
scooterlord,

1
Ciao di nuovo! Notato quanto segue. Quando si apre per la prima volta il primo modale, il margine destro è sbagliato fino a quando non si ridimensiona una volta. Qualche idi su questo?
scooterlord,

1
@bernie Ho fatto screenshot su Browserstack con un fork del mio codepen che ha la modale corta aperta sul documento. Già : browserstack.com/screenshots/… Browserstack non supporta v9.3.x per gli screenshot (ancora), ma penso qualcosa di simile a quello che hai descritto si verifica su iOS 6.0 (vedi screenshot iPad 3rd (6.0) (Portrait)). Forse è un vecchio bug che è tornato nella v9.3.2. Se lo desideri, puoi presentare una segnalazione di bug su forum.developer.apple.com/community/safari-and-web/…
dimbslmh,

37

La mia soluzione

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

Dovresti usare la parte superiore imbottita. margin interromperà l'azione ravvicinata quando si fa clic sull'overlay
anvd

2
Il margine superiore impostato al 25% richiede che il modale sia alto al 50%.
ribellione

28

Può semplicemente essere risolto con 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);
}

Con prefisso

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

2
Ciò impedisce di fare clic sullo sfondo a causa dell'altezza di 100VH. Va bene per le impostazioni "fondale:" statico ".
ianstigator,

questa causa dissolve il problema dell'animazione
Viswanath Lekshmanan,

23

Mi è venuta in mente una soluzione css pura! È css3, il che significa che ie8 o inferiore non è supportato, ma a parte questo è testato e funziona su iOS, Android, ie9 +, Chrome, Firefox, Desktop Safari.

Sto usando i seguenti 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;
}

Ecco un violino. http://codepen.io/anon/pen/Hiskj

..selezionando questa come la risposta corretta poiché non esiste un javascript extra pesante che metta in ginocchio il browser in caso di più di una modale.


8
Il punto centrale dell'uso di JavaScript era ottenere l' altezza sconosciuta del modale. La tua soluzione ha un'altezza fissa dell'80%, che non risponde alla tua domanda: "Come puoi posizionare il modale verticalmente al centro quando non conosci l'altezza esatta del modale ?"
dimbslmh,

... la quota di altezza è impostata per limitare l'altezza modale MASSIMA rispetto all'altezza dello schermo. Tuttavia, la percentuale di traduzione viene impostata in base all'altezza del CONTENUTO.
scooterlord,

3
Se vuoi ottenere una soluzione che non cambi le dimensioni della casella modale, prova anche la seguente soluzione css: tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal
klickagent.ch

Molto bello pure. Tuttavia, ha un approccio diverso da quello che sto descrivendo. Nel tuo caso l'intero modale si sposta su e giù, quando nel mio caso viene creato un elemento overflow. Molto carino però! Mi piace!
scooterlord,

Questo richiede che l'altezza sia impostata. Che non è esattamente la stessa richiesta dall'utente.
ribellione

21

Se stai bene usando Flexbox, questo dovrebbe aiutarti a risolverlo.

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

.modal-content {
  margin: 0 auto;
}

7
Scopro che questa risposta funziona benissimo per me. Tuttavia, se si desidera consentire agli utenti di chiudere un modal facendo clic su di essa la cornice, assicurarsi di aggiungere pointer-events: nonea .modal-dialoged pointer-events: autoa .modal-content. Becausu .modal-dialog {height: 100%}copre l'intera colonna sopra e sotto un modale e disabilita gli utenti a fare clic sullo sfondo su quell'area.
condisci il

combinato con il suggerimento di @ChingTingWu, il più efficace
strider

E dov'è il suggerimento di @ChingTingWu?
giovannipds,

1
ChingTingWu sembra essere cambiato in @wuct
xiaolin il

1
@giovannipds Spiacenti, ho rinominato il mio nome utente, perché è più breve e più facile da taggare.
Ci

20

La mia soluzione:

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

Questo sembra funzionare perfettamente con Bootstrap 3. Perché non è questa la risposta accettata? È molto più semplice (4 direttive css) rispetto alle altre.
danielricecodes il

@danielricecodes Ho intenzione di fare un tentativo e presumere che sia a causa dei problemi con le unità viewport. . La risposta proposta da scooterlord ha proposto la compatibilità anche con IE9 e iOs, che suggeriscono per me è una preoccupazione. Se controlli la pagina dei problemi di canIuse, vedrai che ci sono problemi con iOs e IE10 e precedenti. Non che io sia d'accordo o no che questa sia la risposta corretta. Sto solo sottolineando perché forse questa non è stata selezionata come risposta.
Malavos

1
C'è un problema con questo approccio quando il modale ha contenuti scorrevoli (più contenuti di quelli che si adattano alla finestra)
Steven Pribilinskiy,

Questa dovrebbe essere la risposta accettata. Finora questa è l'unica soluzione che funziona per me. Grazie per questo.
shifu,

Questo non funzionerà se il contenuto modale è maggiore dell'altezza dello schermo (se il tuo modale deve scorrere)
Brett Gregson

18

Tutto quello che ho fatto nel mio caso è impostare il Top nel mio css conoscendo l'altezza del modale

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

nel mio css ho impostato

#myModal{
    height: 400px;
    top: calc(50% - 200px) !important;
}

1
Come noob a css, questa risposta è sembrata la meno spaventosa e ha portato a termine il lavoro
Oded Ben Dov,

2
Questo non risponde alla prima parte della domanda: "..quando non conosci l'altezza esatta del modale?"
Natec,

15

L'aggiunta di questo semplice CSS funziona anche.

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

.modal-content {
  margin: auto !important;
  height: fit-content !important;
}

Che cos'è il contenuto adatto?
Marc Roussel,

12

C'è un modo più semplice per farlo usando css:

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

Questo è tutto. Si noti che è necessario solo applicarlo a.modal-dialog div contenitore.

Demo: https://jsfiddle.net/darioferrer/0ueu4dmy/


7
Non reattivo su dispositivo mobile a causa della larghezza e altezza fisse.
ianstigator,

La tua risposta presuppone che ogni dispositivo abbia la stessa risoluzione dello schermo
Patricio Rossi,

Nessun uomo. Presumo che tu abbia capito questo esempio e che tu sia in grado di adattarlo a ciascun caso.
Dario Ferrer,

In Bootstrap v3.3.0 eseguito correttamente, grazie
Amin Ghaderi,

11

Espandendosi sull'ottima risposta di @ Finik, questa correzione si applica solo ai dispositivi non mobili. Ho testato in IE8, Chrome e Firefox 22 - funziona con contenuti molto lunghi o brevi.

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

8

La soluzione più universale che ho scritto. Calcola dinamicamente con l'altezza della finestra di dialogo. (Il prossimo passo potrebbe essere il ricalcolo dell'altezza delle finestre di dialogo sul ridimensionamento della finestra.)

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

});

7

Ho trovato la soluzione perfetta da qui

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

1
Grazie. Perfetto per me con una modifica: 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
    }
});

Con un paio di modifiche ai selettori questo ha funzionato come un fascino. @$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
juliangonzalez,

4

Ecco un altro metodo css che funziona abbastanza bene e si basa su questo: 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;
    }
}

Come con altre transformsoluzioni, il problema si risolve quando il modale ha contenuti scorrevoli (più contenuto di quello che si adatta alla finestra)
Steven Pribilinskiy,

3

ho scaricato bootstrap3-dialog dal seguente link e modificato la funzione aperta in bootstrap-dialog.js

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

Codice

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

Ecco una modifica che può essere applicata nel tuo codice, senza dover cambiare l'origine BSDialog originale: gist.github.com/mahemoff/8ff6d3782d2da6f9cbb3 (solo alcune modifiche a JS, inoltre è scritto in Coffee ma hai l'idea).
mahemoff,

3

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

2

Prova qualcosa del genere:

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

1
Questo potrebbe funzionare abbastanza bene, ma i modali bootstrap hanno assoluti, dentro fissi, dentro questo e quello ...: /
scooterlord

1
Cosa hanno a che fare queste classi con le modali Bootstrap / Bootstrap?
lofihelsinki,


1

Un modo semplice Lavora per me. 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>    

1

ancora un'altra soluzione che imposterà una posizione valida per ogni modale visibile su window.resizeevento e su 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);

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

1

So che è un po 'tardi, ma sto aggiungendo una nuova risposta in modo che non si perda tra la folla. È una soluzione cross-desktop-mobile-browser che funziona ovunque correttamente come dovrebbe.

Deve solo modal-dialogessere racchiuso in una modal-dialog-wrapclasse e deve avere le seguenti aggiunte di codice:

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

La finestra di dialogo inizia centrata e in caso di contenuti di grandi dimensioni cresce semplicemente in verticale fino a quando viene visualizzata una barra di scorrimento.

Ecco un violino funzionante per il tuo piacere!

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


1

Questo è piuttosto vecchio e richiede specificamente una soluzione usando Bootstrap 3, ma per chiunque si chieda: da Bootstrap 4 in poi c'è una soluzione integrata chiamata .modal-dialog-centered. Ecco il problema: https://github.com/twbs/bootstrap/issues/23638

Quindi usando v4 devi solo aggiungere .modal-dialog-centeredper .modal-dialogcentrare verticalmente il modale:

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

0

Prendi in considerazione l'uso del plug-in bootstrap-modale che trovi qui - https://github.com/jschr/bootstrap-modal

Il plugin centrerà tutte le tue modali


... sfortunatamente ci avevo provato ma non riuscivo a farlo funzionare correttamente - almeno non con il MIO codice. Immagino che tutti debbano personalizzarlo in base alle proprie esigenze! Grazie per la risposta però.
scooterlord,

0

Per il centraggio, non capisco cosa c'è con le soluzioni troppo complicate. bootstrap lo centra già orizzontalmente per te, quindi non è necessario rovinare tutto. La mia soluzione è solo impostare un margine superiore solo usando jQuery.

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

Ho usato l'evento loaded.bs.modal mentre sto caricando il contenuto in remoto e l'utilizzo dell'evento shows.ba.modal causa un calcolo errato dell'altezza. Puoi ovviamente aggiungere un evento per il ridimensionamento della finestra se ne hai bisogno per essere così reattivo.


se il modale è abbastanza grande, può causare problemi
scooterlord,

0

Modo molto semplice per raggiungere questo concetto e otterrai modale sempre nel moddle del tuo schermo da css come fllow: http://jsfiddle.net/jy0zc2jc/1/

devi solo modalvisualizzare la classe come tabella seguendo i css:

display:table

e modal-dialogcomedisplay:table-cell

vedere l'esempio di lavoro completo nel violino dato


Non vedo affatto un modale
ThaDafinser,

L'unica cosa che vedo (in Google Chrome) è un'icona a croce rossa e lo sfondo
ThaDafinser,

Non scrollabel quando il modale ha più contenuto di quello che si adatta alla finestra
Steven Pribilinskiy,

0

non è così complicato.

per favore prova questo:

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

0

Usa questo semplice script che centra i modali.

Se lo desideri, puoi impostare una classe personalizzata (es: .modal.modal-vcenter invece di .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;
}

0

In mobile plantform potrebbe sembrare un po 'diverso, ecco il mio codice.

<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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.