Las personas que han usado el componente modal de arranque están confundidos. ¿Por qué no se puede centrar verticalmente una buena caja emergente? Estaba trabajando en un proyecto EIT. Dado que algunos marcos en este proyecto siguen algunas reglas de NTTDATA, utilicé Bootstrap. Encontré esto por primera vez y sentí que estaba muy en conflicto y pensé que no era bueno, pero cuando lo usé, sentí que no era diferente de otras cajas emergentes. Menos tonterías, llega al punto, el problema del centrado vertical del cuadro emergente de arranque es porque el estilo de la caja emergente que obtuve no se centra verticalmente, sino el 10%superior, pero la página es muy desagradable.
La solución es la siguiente:
1. En CSS, encuentre
.modal.fade.in {top: 10%;}Si modifica este estilo, estará bien. Dado que CSS es global, también puede definir la posición (altura) de un cierto modal en la página. El método es el siguiente:
<style>#mymodal-help {top: 300px;} </style>#MyModal-Help es la ID modal, por lo que la configuración está bien.
2. En JS,
Estoy usando bootstrap-modal.js (si estoy usando bootstrap.js o bootstrap.min.js, también está bien, pero necesito encontrar la ubicación correspondiente).
Encontrado en JS (rojo es el método que agregué):
var izquierda = ($ (document.body) .width () - that. $ element.width ()) / 2; var top = ($ (document.body) .Height () - that. $ element.height ()) / 2; var scrolly = document.documentelement.scrolltop || document.body.scrolltop; // Solución Scrollbar var top = (window.screen.height /4) + scrolly - 120; // SPROLLBAR SOLUCIÓN Console.log (izquierda); Eso. que.enforceFocus ()
Una vez encontrado, agregue el rojo y estará bien, para que todas las cajas emergentes se centren verticalmente.
Lo anterior es la explicación detallada del problema y la solución del centrado vertical del cuadro emergente 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!