Люди, которые использовали модальный компонент начальной загрузки, смущены. Почему хорошая всплывающая коробка не может быть центрирована по вертикали? Я случайно работал над проектом EIT. Поскольку некоторые фреймворки в этом проекте следуют некоторым правилам Nttdata, я использовал Bootstrap. Я столкнулся с этой штукой впервые и почувствовал, что она была очень конфликту, и я думал, что это не очень хорошо, но когда я использовал ее, я чувствовал, что это ничем не отличалось от других всплывающих коробок. Меньше чепухи, добраться до сути, проблема вертикального центрирования всплывающей окна начальной загрузки заключается в том, что стиль всплывающей коробки, которую я получил, не центрирует вертикально, а топ-10%, но страница очень отвратительно.
Решение заключается в следующем:
1. В CSS найти
.modal.fade.in {top: 10%;}Если вы измените этот стиль, все будет в порядке. Поскольку CSS является глобальным, вы также можете определить (высоту) положение определенного модала на странице. Метод заключается в следующем:
<style>#mymodal-help {top: 300px;} </style>#MyModal-Help-это модальный идентификатор, поэтому настройка в порядке.
2. в JS,
Я использую Bootstrap-modal.js (если я использую Bootstrap.js или Bootstrap.min.js, это также в порядке, но мне нужно найти соответствующее местоположение).
Найдено в JS (красный - это метод, который я добавил):
var Left = ($ (document.body) .width () - that. $ element.width ()) / 2; var top = ($ (document.body) .height () - that. $ element.height ()) / 2; var scrolly = document.documentelement.scrolltop || document.body.scrolltop; // Решение Scrollbar var top = (window.screen.height /4) + scrolly - 120; // Консоль раствора Scrollbar.log (слева); это. $ element .AdClass ('in') .attr ('aria-hidden', false) .css ({слева: слева, верх: верх, маржа: "0 auto"}); что. enforcefocus ()После того, как он найдет, добавьте красный, и все будет в порядке, чтобы все всплывающие коробки были центрированы по вертикали.
Выше приведено подробное объяснение проблемы и решение вертикального центрирования всплывающей окна Bootstrap (Modal), представленного вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!