Bootstrap Offizielle Website Download: http://v3.bootcss.com/
Heute werde ich ein Problem mit dem Bootstrap -Framework teilen. Während der Produktentwicklung wurde eine große Anzahl von Pop-up-Fenstern (Modal) verwendet.
Als ich anfing zu lernen, es zu verwenden, stellte ich fest, dass dieses Fenster nicht vertikal zentriert, immer nach oben und nicht gezogen werden kann. Nachdem ich mir die Anweisungen zur Verwendung angesehen hatte, habe ich nicht zu viele Attributeinstellungen und -methoden angegeben, daher habe ich die Standardmethode verwendet. Kürzlich hat der Kunde eine Anfrage gestellt: Kann das Popup-Fenster zentriert werden? Da einige kleine Fenster auf der Oberseite sind, ist die Gesamtseite unausgeglichen und die größeren sind immer noch akzeptabel.
Da ich mit Bootstrap noch nicht sehr vertraut war, startete ich Baidu und Google und stellte fest, dass es nur wenige Lösungen wie folgt gab:
$ ("#myModal"). modal (). CSS ({"Margin -top": function () {return - ($ (this) .Height () / 2);}});Referenzadresse: http://www.g2w.me/2012/06/bootstrap-modal-hown-in-the-center/
Ich habe diese Methode selbst ausprobiert, aber sie war nicht vollständig zentriert. Wenn die Größe des Fensters unterschiedlich ist, ändert sich der angezeigte Randwert auch jedes Mal, und es gibt Scrollstangen auf der Abdeckebene, die nicht gut aussehen.
Ich habe auch verschiedene Möglichkeiten versucht, sie zu ändern, aber es war nicht optimistisch. Ich stellte fest, dass ich nicht den Wert von $ (this) .height () erhalten konnte, bevor das Fenster auftauchte. Ich dachte, ich würde ($ (Fenster) .Height ()-$ (this) .height ())/2 verwendet, aber ich stellte fest, dass es immer noch nicht machbar war.
Schließlich kann ich nur den Quellcode untersuchen und feststellen, dass der folgende Code nach 900 Zeilen der Datei bootstrap.js hinzugefügt werden kann, um die vertikale Zentrierung zu erreichen.
that. $ element.children (). EQ (0) .css ("Position", "absolut"). (that. $ element.width () - that. $ element.children (). EQ (0) .width ()) / 2 + "px";}});Der Seitencode lautet wie folgt:
<div><button data-toggle="modal" data-target="#myModal">Launch demo modal</button><!-- Modal --><div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div><div><div><button type="button" data-dismiss="modal" aria-hidden="true">×</button><h4 id="myModalLabel">Modal title</h4></div><div>...</div><div><button type="button" data-dismiss="modal">Close</button><button type="button">Save changes</button></div><!-- /.modal-content --></div><!-- /.modal-dialog-> < /div> <!-/.modal-> < /div>
Die Renderings sind wie folgt:
Das obige ist der Beispielcode der vertikalen Zentrierung des Bootstrap -Modals (Modal), das Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!