Detaillierte Erläuterung des Problems und Lösung der vertikalen Zentrierung der Bootstrap-Popup-Box (modal)

Leute, die die Bootstrap-Modal-Komponente (Modal-Box) verwendet haben, sind verwirrt. Warum kann eine gute Popup-Box nicht vertikal zentriert sein? Ich habe zufällig an einem EIT-Projekt gearbeitet, da ich Bootstrap zum ersten Mal verwendet habe und das Gefühl hatte, dass es nicht gut ist Nachdem ich es verwendet habe, scheint es sich nicht von anderen Popup-Boxen zu unterscheiden. Kommen wir ohne weitere Umschweife zum Punkt, dem Problem der vertikalen Zentrierung der Bootstrap-Popup-Box, denn der Popup-Box-Stil, den ich erhalten habe, ist nicht vertikal zentriert, sondern die oberen 10 %, aber wenn die Seite lang ist, ist es so sieht besonders ekelhaft aus.

Die Lösung lautet wie folgt:

1. Suchen Sie im CSS nach

.modal.fade.in {
top: 10%;
}

Dieser Stil kann in CSS global geändert werden, er kann auch auf die (Höhen-)Position eines bestimmten Modals auf der Seite definiert werden. Die Methode lautet wie folgt:

<style>
#myModal-help
{
top:300px;
}
</style>

#myModal-help Dies ist die ID des Modals, daher ist die Einstellung in Ordnung.

2. In js,

Ich verwende bootstrap-modal.js (wenn Sie bootstrap.js oder bootstrap.min.js verwenden, das gleiche Ja, aber Sie müssen Sie den entsprechenden Standort finden).

ist in js zu finden (Rot ist die Methode, die ich hinzugefügt habe):

var left = ($(document.body).width() - that.$element.width()) / 2;
<strong><span style="color: #ff0000">var top = ($(document.body).height() - that.$element.height()) / 2;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop; //滚动条解决办法
var top = (window.screen.height / 4) + scrollY - 120; //滚动条解决办法
</span></strong>console.log(left);
that.$element
.addClass(&#39;in&#39;)
.attr(&#39;aria-hidden&#39;, false)
.css({
left: left,
top: top,
margin: "0 auto"
});
that.enforceFocus()

Nachdem Sie es gefunden haben, fügen Sie Rot hinzu Geben Sie es ein und es ist in Ordnung, sodass alle Popup-Boxen vertikal zentriert sind.

Das Obige ist das relevante Wissen, das Ihnen der Herausgeber über das Problem und die Lösung der vertikalen Zentrierung des Bootstrap-Popup-Felds (modal) vorgestellt hat Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Ausführlichere Erläuterungen zu Problemen und Lösungen im Zusammenhang mit der vertikalen Zentrierung von Bootstrap-Popup-Boxen (modal) finden Sie auf der chinesischen PHP-Website!