溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎么設置BootStrap模態框垂直居中，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
解決問題：BootStrap自帶的模態框不垂直居中
解決方案：調用BootStrap為我們提供的方法$('.modal').on('show.bs.modal', function(){});
在模態框顯示之前我們用JS修改他的Top值，
具體代碼如下：
/**
* 垂直居中模態框
**/
function centerModals() {
$('.modal').each(function(i) {
var $clone = $(this).clone().css('display', 'block').appendTo('body');
var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
top = top > 50 ? top : 0;
$clone.remove();
$(this).find('.modal-content').css("margin-top", top - 50);
});
}
// 在模態框出現的時候調用垂直居中方法
$('.modal').on('show.bs.modal', centerModals);
// 在窗口大小改變的時候調用垂直居中方法
$(window).on('resize', centerModals);關于怎么設置BootStrap模態框垂直居中就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
