1. Wie können Sie das Modal vertikal in der Mitte positionieren, wenn Sie die genaue Höhe des Modals nicht kennen?
Um das Bootstrap 3 Modal absolut zu zentrieren, ohne eine Höhe anzugeben, müssen Sie zuerst das Bootstrap-CSS überschreiben, indem Sie dies Ihrem Stylesheet hinzufügen:
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
Dadurch wird die obere linke Ecke der Modaldialoge in der Mitte des Fensters positioniert.
Wir müssen diese Medienabfrage hinzufügen, sonst ist der modale Rand links auf kleinen Geräten falsch:
@media (max-width: 767px) {
.modal-dialog-center { /* Edited classname 10/03/2014 */
width: 100%;
}
}
Jetzt müssen wir seine Position mit JavaScript anpassen. Dazu geben wir dem Element einen negativen oberen und linken Rand, der der Hälfte seiner Höhe und Breite entspricht. In diesem Beispiel verwenden wir jQuery, da es mit Bootstrap verfügbar ist.
$('.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);
}
});
});
Update (01.10.2015):
Hinzufügen zu Finiks Antwort . Credits für die Zentrierung im Unbekannten .
.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;
}
Beachten Sie die negative Marge-richtig? Dadurch wird der durch den Inline-Block hinzugefügte Speicherplatz entfernt. Dieser Raum bewirkt, dass das Modal zum Ende der Seite springt @media width <768px.
2. Ist es möglich, das Modal zentriert zu haben und einen Überlauf zu haben: auto im Modalkörper, aber nur, wenn das Modal die Bildschirmhöhe überschreitet?
Dies ist möglich, indem dem Modalkörper ein Überlauf-y: auto und eine maximale Höhe gegeben werden. Dies erfordert etwas mehr Arbeit, damit es richtig funktioniert. Beginnen Sie mit dem Hinzufügen zu Ihrem Stylesheet:
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
Wir werden jQuery erneut verwenden, um die Fensterhöhe zu ermitteln und zuerst die maximale Höhe des modalen Inhalts festzulegen. Dann müssen wir die maximale Höhe des Modalkörpers festlegen, indem wir den Modalinhalt mit dem Modal-Header und dem Modal-Footer subtrahieren:
$('.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);
}
});
});
Eine funktionierende Demo mit Bootstrap 3.0.3 finden Sie hier: http://cdpn.io/GwvrJ
BEARBEITEN: Ich empfehle stattdessen die Verwendung der aktualisierten Version für eine reaktionsschnellere Lösung: http://cdpn.io/mKfCc
Update (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'));
}
});
(Aktualisiert am 30.11.2015 http://cdpn.io/mKfCc mit der obigen Bearbeitung)