Bootstrap模态框垂直高度居中问题
Bootstrap对话框改变其默认宽高，高度不会自适应居中。为解决这个问题，最好的方式是能够通过css来解决，试了几种网上的方案发现都不行。然后想到可以通过js来修正，什么时候修正最好？于是想到可以注册全局的事件。
下表是Bootstrap官方的事件。
| Event Type | Description |
|---|---|
| show.bs.popover | This event fires immediately when the show instance method is called. |
| shown.bs.popover | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
| hide.bs.popover | This event is fired immediately when the hide instance method has been called. |
| hidden.bs.popover | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
| inserted.bs.popover | This event is fired after the show.bs.popover event when the popover template has been added to the DOM. |
Copy
$(\'#myPopover\').on(\'hidden.bs.popover\', function () {
// do something…
})
但是，我使用的是$(aa).modal(\'show\')，所以改成这样：
$(function () {
//修正modal弹窗高度不能自适应的问题
$(\'body .modal\').on(\'show.bs.modal\', function () {
var $cur = $(this);
$cur.css("top", ($(window).height() - $cur.height()) / 2);
});
});
- 上一篇 »css样式设置高度不定文本垂直居中
- 下一篇 »css水平竖直居中方式
