Descargar el sitio web oficial de Bootstrap: http://v3.bootcss.com/
Hoy compartiré un problema encontrado al usar el marco Bootstrap. Se usó una gran cantidad de ventanas emergentes (modales) durante el desarrollo del producto.
Cuando comencé a aprender a usarlo, descubrí que esta ventana no se puede centrar verticalmente, siempre hacia arriba y no se puede arrastrar. Después de mirar las instrucciones para su uso, no proporcioné demasiadas configuraciones y métodos de atributos, por lo que utilicé el método predeterminado. Recientemente, el cliente ha hecho una solicitud: ¿se puede centrar la ventana emergente? Debido a que algunas ventanas pequeñas están en la parte superior, la página general está desequilibrada y las más grandes aún son aceptables.
Debido a que no estaba muy familiarizado con Bootstrap antes, comencé Baidu y Google y descubrí que solo había unas pocas soluciones, como sigue:
$ ("#mymodal"). modal (). css ({"margin -top": function () {return - ($ (this) .height () / 2);}});Dirección de referencia: http://www.g2w.me/2012/06/bootstrap-modal-shownin-the-center/
Probé este método yo mismo, pero no estaba completamente centrado. Si el tamaño de la ventana es diferente, el valor de margen que se muestra también cambiará cada vez, y habrá barras de desplazamiento en la capa de cubierta, lo que no es guapo.
También probé varias formas de cambiarlos, pero no era optimista. Descubrí que no podía obtener el valor de $ (esto) .Height () antes de que apareciera la ventana. Pensé que estaba usando ($ (ventana) .Height ()-$ (esto) .Height ())/2, pero descubrí que todavía no era factible.
Finalmente, solo puedo estudiar el código fuente y encontrar que el siguiente código se puede agregar después de 900 líneas del archivo bootstrap.js para lograr centrado vertical.
eso. $ element.children (). eq (0) .css ("posición", "absoluto"). css ({"margin": "0px", "top": function () {return (that. $ element.heeTer () - that. $ element.children (). eq (0) .Height () - 40) / 2 + "px";}, "izquierda () orthing (izquierda (izquierda". (que. $ element.width () - that. $ element.children (). eq (0) .width ()) / 2 + "px";}});El código de página es el siguiente:
<Div> <Botton Data-Toggle = "modal" data-target = "#mymodal"> iniciar demo modal </boton> <!-modal-> <div id = "mymodal" tabindex = "-1" role = "diálogo" aria-labelledby = "mymodallabel" aria-hidden = "true"> <div> <iv> <div> <div> <button "button" button "button" button "datal" aria-hidden = "true"> × </boton> <h4 id = "mymodallabel"> title modal </h4> </div> <div> ... </div> <div> <button type = "button" data-dismiss = "modal"> cerrar </button> <button type = "botón"> guardar cambios </boton> </iv> <!-/.modal-content-> <ivin <!-"! /..modal-dialog-> </div> <!-/.modal-> </div>
Las representaciones son las siguientes:
Lo anterior es el código de ejemplo del centrado vertical del cuadro modal de arranque (modal) introducido por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!