Vertikale Zentrierung des modalen Bootstrap-Popups

Ich bin ein Front-End-Neuling und mein Unternehmen versucht, Bootstrap für Projekte zu verwenden. Ich übernehme die Führung, indem ich für meine Kollegen durch die „Grube“ gehe, aber das UI-Mädchen macht es mir schwer, das Modal zu schaffen Die Popup-Box ist vertikal zentriert und ich verbringe Zeit damit, sie zu erfüllen.

Die erste ist Baidu. Die Methode besteht darin, den Quellcode zu ändern

that.$element.children().eq(0).css("position", "absolute").css({
     "margin":"0px",
     "top": function () {
       return (that.$element.height() - that.$element.children().eq(0).height()-40) / 2 + "px";
     },
    "left": function () {
       return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px";
     }
   });

Das ist Die äußerste Ebene div.modal, that.element.children().eq(0) ist div.modal-dialog, was nichts anderes ist, als den linken Wert und den Höhenwert des Modal-Dialogs im Inneren zu berechnen, um ihn zu zentrieren Das heißt, fügen Sie diesen Code zum Quellcode von bootstrap.js hinzu (ungefähr 1.000 Zeilen). Sie können damit trösten, dass.element.children().eq(0).width() immer 0 ist, was bedeutet, dass dies der Fall ist Der Wert wurde meiner bescheidenen Meinung nach noch nicht erstellt, aber ich habe ihn richtig zentriert. Eines davon ist, dass beim aktiven Ziehen des Fensters ein Problem aufgetreten ist Die Lösung wird auch nicht entsprechend angepasst. Es ist sehr einfach, eine Größenänderungsmethode zu schreiben. Das zweite Problem besteht darin, dass der Wert von that.element.children().eq(0) kleiner als 600 ist. .width() ist manchmal richtig und manchmal falsch (bitte bitten Sie den Master, mir bei der Beantwortung zu helfen), also geben Sie es auf

Wenn Sie das Problem direkt lösen möchten, schauen Sie sich das oben Gesagte an und ignorieren Sie es

Die vertikale Zentrierung berücksichtigt display:table-cell. Inspiriert durch das Internet lautet die Lösung wie folgt.

Schreiben Sie den Stil neu und fügen Sie das Style-Tag oder den externen Link in den HTML-Code ein.

.modal-dialog{display:table-cell;vertical-align:middle;}
.modal-content{width:600px;margin:0px auto;}
@media screen and (max-width: 780px) {
.modal-content{width:400px;}
}
@media screen and (max-width: 550px) {
.modal-content{width:220px;}
}

Ändern Sie das modale Triggerereignis $('.modal').modal() in das folgendes

$('.modal').modal().css({'display':'table','width':'100%','height':'100%'})

Es ist sehr einfach zu ändern, aber auch sehr gewalttätig. Die Konsequenz ist, dass das Klicken auf eine beliebige Stelle, um das Modal verschwinden zu lassen, ungültig ist. Die Informationen, nach denen ich gesucht habe, sind ungültig.

An diesem Punkt kann die vertikale Zentrierung des Modals erreicht werden, es gibt jedoch immer noch Probleme mit der Ein- und Ausblendzeit des Modal-Hintergrunds sind zu übertrieben und unterscheiden sich ein wenig von den Originalen. Bitte lassen Sie es mich wissen.

$(触发器).click(function(){         
  $('.modal').modal().css({'display':'table','width':'100%','height':'100%'})//这句触发modal
  $('.modal-backdrop').fadeIn()
  event.stopPropagation();//因为触发的元素肯定在document里边，所以必须阻止冒泡
})
$(document).click(function(){
  $('.modal').hide()
  $('.modal-backdrop').fadeOut()
})

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.

Weitere Artikel zur vertikalen Zentrierung von Bootstrap-Modal-Popup-Boxen finden Sie auf der chinesischen PHP-Website!