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