Bootstrap模態(tài)框垂直高度居中問題
Bootstrap對話框改變其默認(rèn)寬高,高度不會自適應(yīng)居中。為解決這個問題,最好的方式是能夠通過css來解決,試了幾種網(wǎng)上的方案發(fā)現(xiàn)都不行。然后想到可以通過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彈窗高度不能自適應(yīng)的問題
$('body .modal').on('show.bs.modal', function () {
var $cur = $(this);
$cur.css("top", ($(window).height() - $cur.height()) / 2);
});
});

浙公網(wǎng)安備 33010602011771號