13518219792
這篇文章將為大家詳細講解有關怎么設置BootStrap模態框垂直居中，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
創新互聯是一家專業提供韶山企業網站建設,專注與網站制作、成都網站建設、H5響應式網站、小程序制作等業務。10年已為韶山眾多企業、政府機構等服務。創新互聯專業的建站公司優惠進行中。
解決問題：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模態框垂直居中就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
