Официальный сайт Bootstrap скачать: http://v3.bootcss.com/
Сегодня я поделюсь проблемой, с которой сталкивается с использованием платформы начальной загрузки. Большое количество всплывающих окон (модалей) использовалось во время разработки продукта.
Когда я впервые начал учиться использовать его, я обнаружил, что это окно не может быть вертикально центрировано, всегда вверх и не может быть перетаскивается. Посмотрев на инструкции для использования, я не предоставил слишком много настроек атрибутов и методов, поэтому я использовал метод по умолчанию. Недавно клиент сделал запрос: можно ли центрировать всплывающее окно? Поскольку некоторые маленькие окна находятся на верхней стороне, общая страница несбалансирована, а более крупные все еще приемлемы.
Поскольку я раньше не был очень знаком с начальной загрузкой, я начал Baidu и Google и обнаружил, что было только несколько решений, следующим образом:
$ ("#mymodal"). modal (). css ({"margin -top": function () {return - ($ (this) .height () / 2);}});Справочный адрес: http://www.g2w.me/2012/06/bootstrap-modal-shown-in-the-center/
Я сам попробовал этот метод, но он не был полностью сосредоточен. Если размер окна отличается, отображаемое значение на марже также будет изменяться каждый раз, и на слое крышки будут прокрутки, что не очень красиво.
Я также попытался несколько способов их изменить, но это не было оптимистично. Я обнаружил, что не могу получить стоимость $ (это). Хейт () до появления окна. Я думал, что использую ($ (window) .height ()-$ (this) .height ())/2, но я обнаружил, что это все еще невозможно.
Наконец, я могу только изучить исходный код и обнаружить, что следующий код может быть добавлен после 900 строк файла bootstrap.js для достижения вертикального центрирования.
это. $ element.children (). EQ (0) .css ("Position", "Absolute"). CSS ({"Margin": "0px", "top": function () {return (that. $ element.height () - that. $ element.children (). EQ (0). Height () - 40) / 2 + "px"; px ";)" () ")") ")") ")") (that. $ element.width () - это. $ element.children (). EQ (0) .Width ()) / 2 + "px";}});Код страницы выглядит следующим образом:
<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"> Модальный заголовок </h4> </div> <div> ... </div> <div> <button Type = "Button" Data-dismiss = "Modal"> Close Clothing> <Button Type = Button "> Сохранить изменения </cutte> </Div> <!-/. Модальный /.modal-dialog-> < /div> <!-/.modal-> < /div>
Рендеринги следующие:
Выше приведено пример кода вертикального центрирования модальной коробки Bootstrap (Modal), представленного вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!