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);
}
})
javascript
twitter-bootstrap
bootstrap-modal
user2613813
quelle
quelle
.modal.fade.in
undtranslateY(-50%)
man macht Top-modalen unzugänglich , wenn modal Inhalte sind größer als Gerätehöhe).Antworten:
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 )
CSS
quelle
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.
quelle
$('.modal:visible').each(centerModal);
if(offset < 0) offset = 0;
Ich füge den gesamten Block in einen Antwortfall ein, der nicht klar ist!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.
quelle
.modal-dialog.modal-sm { padding-top:15%; }
Der beste Weg, den ich für alle HTML5-Browser gefunden habe:
quelle
align-items: center;
zubody.modal-open .modal
scheint zu funktionieren.// Stile
quelle
Der Parameter top wird in .modal.fade.in überschrieben, um den in Ihrer benutzerdefinierten Deklaration festgelegten Wert zu erzwingen. Fügen Sie das
!important
Schlü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.quelle
Ab Bootstrap 4 wurde die folgende Klasse hinzugefügt, um dies für Sie ohne JavaScript zu erreichen.
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.
quelle
das funktioniert bei mir perfekt:
Vollständige Demo- URL: https://codepen.io/dimbslmh/full/mKfCc
quelle
Sie können verwenden:
um es sowohl vertikal als auch horizontal zu zentrieren.
quelle
Weil die meisten Antworten hier nicht oder nur teilweise funktionierten:
Sie müssen den Selektor [Stil] verwenden, um den Stil nur auf das aktuell aktive Modal anzuwenden, anstatt auf alle Modalitäten.
.in
wä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.quelle
Sie können das vertikale Ausrichtungszentrum auf dem Bootstrap 3-Modal folgendermaßen erreichen:
und fügen Sie diese CSS-Klasse dem Container "Modal-Dialog" hinzu
jsFiddle-Arbeitsbeispiel: http://jsfiddle.net/U4NRx/
quelle
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:
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
quelle
Vorteile:
display:table-cell
(das ist nicht für Layouts gedacht)markup
SCSS
für diejenigen eingefügt , diegulp
oder verwendengrunt
Code-Snippet anzeigen
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 mitgulp
/grunt
):quelle
Noch eine CSS-Lösung. Funktioniert nicht für Popups, die größer als das Ansichtsfenster sind.
In der
.modal-dialog
Klasse wird die Position auf absolut (von relativ) überschrieben und der Inhalt zentriertright:0, left: 0
Beim
.modal.fade .modal-dialog , .modal.in .modal-dialog
Einstellen der Übergangsanimationtop
anstatt beim Übersetzen.margin-top
Verschiebt 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.
quelle
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.
quelle
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.
quelle
Meine Wahl, nur ein wenig CSS: (funktioniert NICHT in IE8)
Sie können mit der ersten Regel spielen, um die Darstellung des Modals zu ändern.
Verwenden von: Bootstrap 3.3.4
quelle
Fügen Sie einfach das folgende CSS zu Ihrem vorhandenen hinzu. Es funktioniert gut für mich
quelle
Basierend auf Aranys Antwort , aber auch unter Berücksichtigung des Seitenlaufs.
quelle
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
Und machen Sie diesen .modal-dialog.centered Container fest und richtig positioniert.
CSS
Oder noch einfacher mit Flexbox.
CSS
quelle
quelle
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-
transition
Eigenschaft für.modal-dialog
quelle
quelle
Dies nimmt Aranys Antwort und lässt es funktionieren, wenn das Modal größer als die Höhe des Bildschirms ist:
quelle
Um die vertikale Modalzentrierung zu bootstrap modal.js hinzuzufügen, habe ich dies am Ende der
Modal.prototype.show
Funktion hinzugefügt :quelle
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
* /
Aus Mailand Pandya
quelle
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.
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:
quelle
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-content
Hö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
div
sollte weggelassen werden, damit dies ordnungsgemäß funktioniert (scheint nichts zu beschädigen). Getestet in Chrome 51 und IE 11.CSS-Code:
BEARBEITEN: In der
.modal-dialog
Klasse 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.quelle
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.
quelle
Vertikal zentriert Fügen Sie .modal-dialogzentriert zu .modal-dialog hinzu, um das Modal vertikal zu zentrieren
Starten Sie das Demo-Modal
quelle