Bootstrap Téléchargement du site officiel: http://v3.bootcss.com/
Aujourd'hui, je partagerai un problème rencontré dans l'utilisation du framework bootstrap. Un grand nombre de fenêtres contextuelles (modaux) ont été utilisées pendant le développement de produits.
Lorsque j'ai commencé à apprendre à l'utiliser, j'ai trouvé que cette fenêtre ne peut pas être centrée verticalement, toujours vers le haut et ne peut pas être traînée. Après avoir examiné les instructions pour une utilisation, je n'ai pas fourni trop de paramètres d'attribut et de méthodes, j'ai donc utilisé la méthode par défaut. Récemment, le client a fait une demande: la fenêtre contextuelle peut-elle être centrée? Parce que certaines petites fenêtres sont sur le côté supérieur, la page globale est déséquilibrée et les plus grandes sont toujours acceptables.
Parce que je ne connaissais pas très bien le bootstrap auparavant, j'ai commencé Baidu et Google et j'ai constaté qu'il n'y avait que quelques solutions, comme suit:
$ ("# mymodal"). modal (). css ({"margin-top": function () {return - ($ (this) .height () / 2);}});Adresse de référence: http://www.g2w.me/2012/06/bootstrap-modal-shown-in-the-center/
J'ai moi-même essayé cette méthode, mais elle n'était pas complètement centrée. Si la taille de la fenêtre est différente, la valeur de marge affichée changera également à chaque fois, et il y aura des barres de défilement sur la couche de couverture, qui n'est pas belle.
J'ai également essayé plusieurs façons de les changer, mais ce n'était pas optimiste. J'ai trouvé que je ne pouvais pas obtenir la valeur de $ (this) .height () avant que la fenêtre n'apparaisse. Je pensais que j'utilisais ($ (fenêtre) .Height () - $ (this) .height ()) / 2, mais j'ai trouvé que ce n'était toujours pas possible.
Enfin, je ne peux qu'étudier le code source et constater que le code suivant peut être ajouté après 900 lignes du fichier bootstrap.js pour atteindre le centrage vertical.
que. $ element.children (). eq (0) .css ("position", "absolu"). CSS ({"margin": "0px", "top": function () {return (that. $ element.height () - that. $ element.children (). eq (0) .height () - 40) / 2 + "px";}, "gauche") {revery (that. $ element.width () - that. $ element.children (). eq (0) .width ()) / 2 + "px";}});Le code de la page est le suivant:
<div> <Button Data-Toggle = "Modal" Data-Target = "# MyModal"> Lancement de démo modal </futton> <! - Modal -> <div id = "MyModal" Tabindex = "- 1" Role = "Dialog" Aria-LABELLEDBY = "MyModallabel" Aria-Hidden = "True"> <v> <v> aria-hidden = "true"> × </ bouton> <h4 id = "mymodallabel"> Title modal </h4> </div> <v> ... </v> <v> <Button Type = "Button" Data-Dismiss = "Modal"> Fermer </ Button> <Button Type = "Button"> Les modifications </ Button> </ Div> <! - /. /.Modal-dialog -> </div> <! - /.modal -> </div>
Les rendus sont les suivants:
Ce qui précède est l'exemple de code du centrage vertical de la boîte modale bootstrap (modale) présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!