bootstrap3 弹出框上下居中例子

来源：互联网发布：opencv python 教程编辑：程序博客网时间：2024/05/29 16:08

1、修改bootstrap3 bootstrap3.css文件让弹出框上下居中

@media (min-width: 768px) {

.modal-dialog {
width: 600px;
margin: 300px auto; //修改此处默认是30px的
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-sm {
width: 300px;
}

}

2、修改bootstrap.js源码Modal.prototype.adjustDialog方法加入如下红色代码

Modal.prototype.adjustDialog = function () {
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight

this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
})

/**设置弹出框上下居中start**/
// 是弹出框居中。。。
var $modal_dialog = $(this.$element[0]).find('.modal-dialog');
//获取可视窗口的高度
var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
//得到dialog的高度
var dialogHeight = $modal_dialog.height();
//计算出距离顶部的高度
var m_top = (clientHeight - dialogHeight)/2;
$modal_dialog.css({'margin':m_top + 'px auto'});
/**设置弹出框上下居中end**/
}

0 0