最近在使用Bootstrap框架,框架本身自带有一个modal模态框,也就是我们平时常叫的弹窗。但是这个模态框有一个特点,就是它本身是不会垂直居中的,默认只是距离顶部30px。那有没有办法让模态框垂直居中呢?有!
一个思路就是使用table布局,table布局的元素默认就是垂直居中的,在把外层.modal 元素设置为display: table ,里层.modal-dialog 元素设置为display: table-cell 之后却发现点击背后半透明的黑色遮罩无法使模态框消失了。所以table 方案 out!
另一个思路则是使用动态计算的方式,先贴上代码:
/**
* 使页面中所有.modal元素在窗口可视范围之内居中
**/
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);
下面来进行解释,仔细观察会发现,centerModals 函数中在top判断时有一个50的高度,因为人的视觉在观察居中时,会有一点点偏差,这个数值可以根据个人的喜好去调整。