方案一 重写CSS
打开引入的boostrap.css(或boostrap.min.css)文件,找到.modal、.modal-dialog样式,在样式内追加如下代码
/*模态框居中*/
.modal {
display: table;
height: 100%;
margin: 0 auto;
}
.modal-dialog {
display: table-cell;
vertical-align: middle;
}*/
方案二 重写JS
打开引入的boostrap.js(或boostrap.min.js)文件,找到Modal.prototype.adjustDialog函数,在函数内追加如下代码
//模态框居中
var element = this.$element;
var dialog = this.$dialog;
dialog.css({
'top': function () {
return (element.height() - dialog.outerHeight(true)) / 2;
}
});
结论
重写CSS后,打开模态框后,点击灰色遮罩层后无法隐藏模态框,推荐使用重写JS方案。
打开引入的boostrap.js(或boostrap.min.js)文件,找到Modal.prototype.adjustDialog函数,在函数内追加如下代码