Vertikales Zentrieren des Bootstrap-Modalfensters

181

Ich möchte mein Modal auf das Ansichtsfenster (Mitte) zentrieren. Ich habe versucht, einige CSS-Eigenschaften hinzuzufügen

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

Ich verwende dieses Beispiel http://jsfiddle.net/rniemeyer/Wjjnd/

Ich habe es versucht

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })
user2613813
quelle
Versuchen Sie außer Kraft zu setzen .modal.fade.inund
haim770
Versuchen Sie es damit: github.com/jschr/bootstrap-modal
John Magnolia
3
Versuchen Sie diese nullsechsdrei.se/… Ich benutze: .modal.fade.in {top: 50%; transformieren: translateY (-50%); }
Jowan Sebastian
Hinzugefügt Flexbox Lösung (die translateY(-50%)man macht Top-modalen unzugänglich , wenn modal Inhalte sind größer als Gerätehöhe).
Tao
Ab Bootstrap 4 wurde Modal-Dialog-Centered hinzugefügt, dass dies nicht mehr notwendig ist. Bitte überprüfen Sie diese Antwort unten.
Jcaruso

Antworten:

258

Dies macht den Job: http://jsfiddle.net/sRmLV/1140/

Es verwendet ein Helfer-Div und einige benutzerdefinierte CSS. Kein Javascript oder jQuery erforderlich.

HTML (basierend auf dem Bootstrap- Demo-Code )

<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;
}
RNobel
quelle
Bei dieser Lösung wegen der Höhe: 100%; und Breite: 100%; Sie können die Modalitäten nicht schließen, indem Sie aus den Modalitäten klicken. Können Sie sich eine Lösung für diese @Rens de Nobel vorstellen?
pcatre
1
Ok, diese Lösung scheint großartig zu funktionieren (außer dass sie mich davon abhält, die Modalitäten zu schließen, indem ich aus ihnen herausklicke). Aber irgendwie scheitern einige meiner e2e-Tests mit Winkelmessern (und ich kann den Grund nicht finden, warum, es fühlt sich nicht so an, als wäre dies ein Fehler). Wie auch immer, ich gehe zurück zur Javascript-Antwort, damit ich nicht mehr Zeit verliere. Aber wie gesagt, dies scheint gut zu funktionieren, nur um Leute zu warnen, die e2e-Tests mit Winkelmessern durchführen, um aufzupassen.
pcatre
3
@pcatre, danke für den Tipp! Ich habe den Code mit einem Fix dafür aktualisiert. Zeigerereignisse setzen: keine; auf den Alignment-Klassen macht den Trick. Getestet in IE11, der neuesten Version von Chrome und Firefox sowie iOS Safari.
RNobel
4
Ich bin mir nicht sicher, ob dies aktualisiert wurde, da die Kommentare von Benutzern, die sagen, dass es nicht funktioniert, beim Klicken auf interne Modalelemente, aber dies funktioniert ab sofort zu 100% für mich, anhand des obigen Beispiels in der Geige. Vielen Dank für Ihre Hilfe und alle obigen Kommentare.
Michael G
2
Ab Bootstrap 4 wurde Modal-Dialog-Centered hinzugefügt, dass dies nicht mehr notwendig ist. Bitte überprüfen Sie diese Antwort unten.
Jcaruso
94

Da die Antwort von gpcola bei mir nicht funktioniert hat, habe ich sie ein wenig bearbeitet, damit sie jetzt funktioniert. Ich habe "margin-top" anstelle von transform verwendet. Außerdem verwende ich das "show" -Ereignis anstelle des "showed" -Ereignisses, da es mir danach einen sehr schlechten Positionierungssprung verlieh (sichtbar, wenn Bootstrap-Animationen aktiviert sind). Stellen Sie sicher, dass die Anzeige vor dem Positionieren auf "Blockieren" eingestellt ist, da sonst $ dialog.height () 0 ist und das Modal nicht vollständig zentriert wird.

(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));
Arany
quelle
6
Dieser ist perfekt! Nur anstelle von $ (document) .height () ist es richtig, $ (window) .height () in Zeile 4 zu verwenden. Außerdem würde ich die letzte Zeile ändern in: $('.modal:visible').each(centerModal);
Denis Chmel
Es funktioniert perfekt für mich, danke. Wenn wir diesen Code verwenden, müssen wir auch das Auffüllen oben und unten im Modaldialog auf 0px setzen, um eine perfekte Zentrierung zu erzielen.
Mina Morsali
Dies bricht ab, wenn das Modal höher als die Höhe des Fensters ist. Deshalb habe ich die folgende Zeile hinzugefügt, bevor ich den oberen Rand des Dialogfelds festgelegt habe: if(offset < 0) offset = 0; Ich füge den gesamten Block in einen Antwortfall ein, der nicht klar ist!
Jetlej
Ich habe einige weitere Änderungen hinzugefügt, um den oberen Rand gleich dem unteren Rand des
Modals
Perfekt, es fehlte $ (this) .css ('display', 'block'); die ganze Zeit und dachte, warum Höhe 0 war.
Jānis Gruzis
80

Das habe ich für meine App getan. Wenn Sie sich die folgenden Klassen in der Datei bootstrap.css ansehen, hat .modal-dialog eine Standardauffüllung von 10px und @media screen und (min-width: 768px) .modal-dialog hat eine obere Auffüllung von 30px. Daher habe ich in meiner benutzerdefinierten CSS-Datei meine obere Auffüllung für alle Bildschirme auf 15% festgelegt, ohne eine Medienbildschirmbreite anzugeben. Hoffe das hilft.

.modal-dialog {
  padding-top: 15%;
}
user1279047
quelle
6
Dies funktioniert nur für kleine Alret-Boxen und nicht für große Boxen
Mina Morsali
Sie könnten sich nur für kleine Modalitäten bewerben:.modal-dialog.modal-sm { padding-top:15%; }
Dunc
61

Der beste Weg, den ich für alle HTML5-Browser gefunden habe:

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

body.modal-open .modal .modal-dialog {
    margin: auto;
}
taha shahid
quelle
2
Ich mochte diese Lösung, sehr sauber. Ich bin mir nicht sicher über Desktop- oder ältere Versionen von Safari, aber es scheint unter iOS 8 in Ordnung zu sein.
Nicolas Galler
1
Ja, ich stimme @NicolasGaller zu. Es funktioniert auch gut für mich. Ich habe in Chrome und Firefox getestet. Es funktioniert gut.
Manjunath Reddy
2
Dies ist eine großartige CSS nur progressive Verbesserung. Kein js erforderlich und jeder Browser, der Flexbox nicht unterstützt, erhält die standardmäßige modale Bootstrap-Platzierung.
Craig Harshbarger
Schließen, aber es bricht ab, Modalitäten schließen zu können, wenn mehr als eine auf der Seite vorhanden ist. Siehe meine Antwort unten, um zu beheben.
Robert McKee
1
Update: Hinzufügen align-items: center;zu body.modal-open .modalscheint zu funktionieren.
Bernie
20
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

// Stile

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
user3389
quelle
3
Dies ist die universelle Antwort. Ich weiß nicht, warum niemand dafür gestimmt hat.
Csaba Toth
3
Ich habe mindestens 4 SO-Einträge mit jeweils einem Dutzend Vorschlägen durchgesehen. Übrigens, im Alter von HTML5 sollte dies zumindest in ein Framework integriert werden. Anstatt zu jonglieren.
Csaba Toth
1
Beachten Sie auch: Wenn Sie für den Tabellenstil width: 100% sagen, erhalten Sie eine horizontale Zentrierung (falls das Modal nicht ausgeblendet ist).
Csaba Toth
1
Beste Antwort bei weitem. Dadurch wird eine Bildlaufleiste erstellt, die Sie jedoch deaktivieren können, indem Sie .modal-open .modal {overflow-y: hidden; }
Christophe
14

Der Parameter top wird in .modal.fade.in überschrieben, um den in Ihrer benutzerdefinierten Deklaration festgelegten Wert zu erzwingen. Fügen Sie das !importantSchlüsselwort nach top hinzu. Dies zwingt den Browser, diesen Wert zu verwenden und alle anderen Werte für das Schlüsselwort zu ignorieren. Dies hat den Nachteil, dass Sie den Wert nirgendwo anders überschreiben können.

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}
Alexander Varwijk
quelle
Dies hindert mich daran, das Modal zu schließen, wenn ich auf den Hintergrund des Modals klicke.
Scott Simpson
13

Ab Bootstrap 4 wurde die folgende Klasse hinzugefügt, um dies für Sie ohne JavaScript zu erreichen.

modal-dialog-centered

Ihre Dokumentation finden Sie hier .

Vielen Dank an vd für den Hinweis, dass Sie beide .modal-dialog-zentriert zu .modal-dialog hinzufügen müssen, um das modal vertikal zu zentrieren.

jcaruso
quelle
1
Dies ist die beste Antwort für Bootstrap 4.
broc.seib
Durch Hinzufügen von Modal-Dialog und Modal-Dialog-zentriert wird ein besseres Ergebnis
erzielt
1
@vd, das in der Dokumentation verstanden wird, sagt "Modal-Dialog-zentriert zu .modal-Dialog hinzufügen, um das Modal vertikal zu zentrieren." Ich werde meine Antwort aktualisieren, um dies auch für diejenigen widerzuspiegeln, die das nicht verstanden haben.
Jcaruso
12

das funktioniert bei mir perfekt:

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

Vollständige Demo- URL: https://codepen.io/dimbslmh/full/mKfCc

AmirHossein Manian
quelle
11

Sie können verwenden:

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

um es sowohl vertikal als auch horizontal zu zentrieren.

Aryeh Armon
quelle
2
Dies ist das wahre "Wie man etwas zentriert" mit CSS ohne Verwendung von Flex. Die Tatsache, dass der Kontext Bootstrap oder ein Modal ist, sollte irrelevant sein. Alle anderen Antworten sind viel zu übertrieben.
ESR
1
Wenn bei dieser Methode das Modal größer als die Bildschirmhöhe des Geräts ist, kann auf die Oberseite des Modals nicht mehr zugegriffen werden.
Tao
10

Weil die meisten Antworten hier nicht oder nur teilweise funktionierten:

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

Sie müssen den Selektor [Stil] verwenden, um den Stil nur auf das aktuell aktive Modal anzuwenden, anstatt auf alle Modalitäten. .inwäre toll gewesen, aber es scheint erst hinzugefügt zu werden, nachdem der Übergang abgeschlossen ist, was zu spät ist und für einige wirklich schlechte Übergänge sorgt. Glücklicherweise scheint Bootstrap immer ein Stilattribut auf das Modal anzuwenden, gerade als es zu zeigen beginnt, also ist dies ein bisschen hackig, aber es funktioniert.

Der :not([style='display: none;'])Teil ist eine Problemumgehung für den Bootstrap, bei dem das Stilattribut nicht korrekt entfernt und stattdessen die Stilanzeige beim Schließen des Dialogfelds auf "Keine" gesetzt wird.

Robert McKee
quelle
Grosses Dankeschön. Es ist eigentlich das einzige, was 2016 funktioniert hat.
AlexioVay
8

Sie können das vertikale Ausrichtungszentrum auf dem Bootstrap 3-Modal folgendermaßen erreichen:

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

und fügen Sie diese CSS-Klasse dem Container "Modal-Dialog" hinzu

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

jsFiddle-Arbeitsbeispiel: http://jsfiddle.net/U4NRx/

EGurelli
quelle
Wie genau zentriert es den Dialog vertikal?
Gkalpak
Funktioniert an den meisten Orten hervorragend, funktioniert jedoch nicht in verpackten HTML5-Anwendungen, die niedriger als Android 4.4 sind.
Josh
3
Mein Modal war die Seite mit diesem
Dorian
1
JEP! Ich benutze: .modal.fade.in {top: 50%; transformieren: translateY (-50%); }
Jowan Sebastian
Ändern Sie einfach 50% bis 15% und der Dialog befindet sich in der Mitte des Fensters. .modal-vertikal-zentriert {transformieren: übersetzen (0, 15%)! wichtig; -ms-transform: translate (0, 15%)! wichtig; / * IE 9 / -webkit-transform: translate (0, 15%)! Wichtig; / Safari und Chrome * /}
Haimei
8

Der sauberste und einfachste Weg, dies zu tun, ist die Verwendung von Flexbox! Das Folgende richtet ein Bootstrap 3-Modal vertikal in der Mitte des Bildschirms aus und ist so viel sauberer und einfacher als alle anderen hier veröffentlichten Lösungen:

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

HINWEIS: Dies ist zwar die einfachste Lösung, funktioniert jedoch aufgrund der Browserunterstützung möglicherweise nicht für alle Benutzer: http://caniuse.com/#feat=flexbox

Es sieht so aus, als ob (wie üblich) der IE hinterherhinkt. In meinem Fall sind alle Produkte, die ich für mich selbst oder für Kunden entwickle, IE10 +. (Aus geschäftlicher Sicht ist es nicht sinnvoll, Entwicklungszeit für die Unterstützung älterer IE-Versionen zu investieren, wenn damit das Produkt tatsächlich entwickelt und der MVP schneller veröffentlicht werden kann.) Dies ist sicherlich kein Luxus, den jeder hat.

Ich habe gesehen, dass größere Websites erkennen, ob Flexbox unterstützt wird oder nicht, und eine Klasse auf den Hauptteil der Seite anwenden. Diese Stufe des Front-End-Engineerings ist jedoch ziemlich robust, und Sie benötigen immer noch einen Fallback.

Ich würde die Menschen ermutigen, die Zukunft des Webs anzunehmen. Flexbox ist fantastisch und Sie sollten es verwenden, wenn Sie können.

PS - Diese Seite hat mir wirklich geholfen, die Flexbox als Ganzes zu erfassen und auf jeden Anwendungsfall anzuwenden: http://flexboxfroggy.com/

BEARBEITEN: Bei zwei Modalen auf einer Seite sollte dies für .modal.in gelten

Greg Blass
quelle
Dies funktioniert ansonsten gut, aber die abschließende Animation sieht nicht gut aus.
user2061057
Sollte es möglich sein, eine Animation mit CSS3-Übergängen durchzuführen?
Greg Blass
7

Vorteile:

  • Modale Inhalte sind auch dann zugänglich, wenn sie größer als das Gerät sind
  • wird nicht verwendet display:table-cell(das ist nicht für Layouts gedacht)
  • erfordert keine Änderungen am Standard-Bootstrap 3-Modal markup
  • Positionierung ist reines CSS. Das JS wird hinzugefügt, um das Modal beim Klicken / Tippen darunter und darüber zu schließen
  • Ich habe das nicht vorangestellte SCSSfür diejenigen eingefügt , die gulpoder verwendengrunt

Hinweis : Ich beabsichtige, diese Antwort mit den neuesten Spezifikationen von Bootstrap 3 auf dem neuesten Stand zu halten. Eine Bootstrap 4-Lösung finden Sie in dieser Antwort (im Moment sind sie mehr oder weniger gleich, aber mit der Zeit können sie abweichen). Wenn Sie einen Fehler oder ein Problem damit finden, lassen Sie es mich wissen und ich werde es aktualisieren. Vielen Dank.


Sauber, ohne Präfix SCSS(zur Verwendung mit 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);
  }
}
tao
quelle
2
Beste Lösung IMO.
Radmation
3

Noch eine CSS-Lösung. Funktioniert nicht für Popups, die größer als das Ansichtsfenster sind.

.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 der .modal-dialogKlasse wird die Position auf absolut (von relativ) überschrieben und der Inhalt zentriertright:0, left: 0

Beim .modal.fade .modal-dialog , .modal.in .modal-dialogEinstellen der Übergangsanimation topanstatt beim Übersetzen.

margin-topVerschiebt das Popup bei kleinen Popups leicht unter die Mitte und bei langen Popups bleibt das Modal mit dem Header hängen. Dahermargin-top:0, margin-bottom:0

Muss weiter verfeinert werden.

Pravin
quelle
3

Für diejenigen, die Angular-UI-Bootstrap verwenden, können die folgenden Klassen basierend auf den obigen Informationen hinzugefügt werden:

Hinweis: Es sind keine weiteren Änderungen erforderlich, und alle Modalitäten werden aufgelöst.

// 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;
}
Jyotirmoy Pan
quelle
3

Wir brauchen kein Javascript. Boostrap modal fügt .in class hinzu, wenn es angezeigt wird. Ändern Sie einfach diese Klassenkombination mit modalclassName.fade.in mit flex css und Sie sind fertig.

Fügen Sie dieses CSS hinzu, um Ihr Modal vertikal und horizontal zu zentrieren.

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

Meine Wahl, nur ein wenig CSS: (funktioniert NICHT 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;
}

Sie können mit der ersten Regel spielen, um die Darstellung des Modals zu ändern.

Verwenden von: Bootstrap 3.3.4

John Bernardsson
quelle
2

Fügen Sie einfach das folgende CSS zu Ihrem vorhandenen hinzu. Es funktioniert gut für mich

.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;
}
Shankar Prakash G.
quelle
2

Basierend auf Aranys Antwort , aber auch unter Berücksichtigung des Seitenlaufs.

(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));
Mathieu
quelle
2

Ich denke, dies ist eine etwas sauberere reine CSS-Lösung als die von Rens de Nobel. Dies verhindert auch nicht, dass der Dialog durch Klicken außerhalb des Dialogfelds geschlossen wird.

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

Fügen Sie dem DIV-Container einfach eine CSS-Klasse mit der Klasse .modal-dialog hinzu, um eine höhere Spezifität als das Bootstraps-CSS zu erzielen, z. B. .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>

Und machen Sie diesen .modal-dialog.centered Container fest und richtig positioniert.

CSS

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

Oder noch einfacher mit Flexbox.

CSS

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}
Vit Koumar
quelle
Diese Flexbox-Version funktioniert nicht wie erwartet. Beim Testen auf dem neuesten Chrome (52.0.x) ist der .modal-Dialog richtig zentriert, aber seine Inhaltsinteraktion scheint an der alten Stelle eingefroren zu sein (seltsam). Sie können jedoch versuchen, diese Technik direkt im .modal-Dialog (nicht im .modal) zu verwenden, und mit einigen anderen Eigenschaften scheint sie zu funktionieren. =)
Giovannipds
2

.modal.in .modal-dialog {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Michael Oxborrow
quelle
1

Dies funktioniert in BS3, nicht in v2 getestet. Es zentriert das Modal vertikal. Beachten Sie, dass es dort übergeht - wenn Sie möchten, dass es nur in der Position angezeigt wird, bearbeiten Sie die CSS- transitionEigenschaft für.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);
});
gpcola
quelle
1
e(document).on('show.bs.modal', function () {
        if($winWidth < $(window).width()){
            $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
        }
    });
    e(document).on('hidden.bs.modal', function () {
        $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
    });
Tomtom
quelle
Könnten Sie klarstellen, was die Funktion 'e' in Ihrer Antwort ist?
Michael Butler
1

Dies nimmt Aranys Antwort und lässt es funktionieren, wenn das Modal größer als die Höhe des Bildschirms ist:

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);
});
jetlej
quelle
Hey @jetlej, warum bearbeitest du nicht einfach Aranys Antwort, um dies aufzunehmen? Sie lösen einen großen Fehler in seinem Code.
pcatre
@pcatre - Ich wusste nicht, dass ich Änderungen einreichen kann! Vielen Dank für den Hinweis
jetlej
1

Um die vertikale Modalzentrierung zu bootstrap modal.js hinzuzufügen, habe ich dies am Ende der Modal.prototype.showFunktion hinzugefügt :

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

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});
andersra
quelle
Funktioniert nicht gut, wenn sich die Höhe des Dialogfelds nach der Anzeige ändert, da die Größe der Seite geändert wird oder sich darin enthaltene Elemente erweitern / reduzieren.
Dirbaio
0

So stellen Sie das Dialogfeld "Modal" auf "Alle alle ausrichten".

/* Hinweis:

1. Auch wenn Sie keinen Selektor zuweisen müssen, werden alle Modalitäten aus dem Dokument gefunden und vertikal in der Mitte angezeigt

2.Um zu vermeiden, dass ein bestimmtes Modal in der Mitte liegt, können Sie Folgendes verwenden: Nicht die Auswahl im Klickereignis

* /

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

Aus Mailand Pandya

user3690101
quelle
0

Verwenden Sie dieses einfache Skript, das die Modalitäten zentriert.

Wenn Sie möchten, können Sie eine benutzerdefinierte Klasse festlegen (z. B. .modal.modal-vcenter anstelle von .modal), um die Funktionalität nur auf einige Modalitäten zu beschränken.

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

Fügen Sie diesen CSS-Fix auch für den horizontalen Abstand des Modals hinzu. Wir zeigen die Schriftrolle auf den Modalen, die Körperschriftrollen werden von Bootstrap automatisch ausgeblendet:

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

Eine weitere CSS-Antwort auf diese Frage ...
Diese Lösung verwendet CSS nur, um den gewünschten Effekt zu erzielen, während die Möglichkeit erhalten bleibt, das Modal durch Klicken außerhalb zu schließen. Außerdem können Sie maximale .modal-contentHöhe und Breite festlegen, damit Ihr Popup nicht über das Ansichtsfenster hinaus wächst. Ein Bildlauf wird automatisch angezeigt, wenn der Inhalt die modale Größe überschreitet.

Hinweis:
Der empfohlene Bootstrap .modal-dialog divsollte weggelassen werden, damit dies ordnungsgemäß funktioniert (scheint nichts zu beschädigen). Getestet in Chrome 51 und IE 11.

CSS-Code:

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

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

BEARBEITEN: In der .modal-dialogKlasse können Sie auswählen, ob ein Benutzer das Modal schließen kann, indem Sie außerhalb des Modals selbst klicken. Die meisten Modalitäten haben eine explizite Schaltfläche "Schließen" oder "Abbrechen". Beachten Sie dies, wenn Sie diese Problemumgehung verwenden.

dsanchez
quelle
0

Die beste Lösung, um Ihr Modal mit Breite und Höhe zu zentralisieren, ist, in css add und in modal diese 'Zentralisierung' als Klasse hinzuzufügen.

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

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

Vertikal zentriert Fügen Sie .modal-dialogzentriert zu .modal-dialog hinzu, um das Modal vertikal zu zentrieren

Starten Sie das Demo-Modal

<!-- 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>
Tayyab Roy
quelle