bootstrap 模态窗口按钮位置_Bootstrap模态框垂直居中

默认下Bootstrap水平居中，上边距为40px，而且还有。照理说这种高大尚的设计符合绝大多数人的审美观点，但是有的设计师、产品经理对此并不感冒。他们会拿出自己以前的作品或者别人的大作给你看，然后对你说：你看别人都将模态框垂直居中，我们也这样做好不好？看在他们态度还不错的份上，下面我们就用一个实例来实现，其实也不复杂。

我的第一反应是使用CSS3的flex布局，不过考虑到要兼容低版本的浏览器甚至IE8就只级使用JavaScript来实现了。

Bootstrap的JavaScript组件是基于jQuery来实现的。从github上下载Bootstrap的完整版源码。打开js目录下的modal.js，搜索adjustDialog方法，可以看到该方法改变模态框的左右内边距从而实现了可以模态框水平居中。

同样我们也应该可以在这里来动态上下内边距平实现模态框垂直居中吧。这个距离怎么计算机，应该等于页面的高度与模态框高度差值的一半。不过，通过测试你会发现，模态框居然并不水平居中反而跑到页面底部去了。这是为什么呢？因为模态框是用通过动态加载模板生成的，在模版加载完毕之前，模态框高度为零，导致计算值不正确。

已经成功了一半，别太着急！我们干脆另外用一个方法来动态设置上边距并通过setTimeout方法来调用，这样就达到最终效果了。

Modal.prototype.adjustDialog = function () {

......

var that = this;

setTimeout(function(){

that.verticalMiddle()

}, 10);

......

}

Modal.prototype.verticalMiddle = function () {

if (this.options.middle) {

this.$element.css('padding-top', (document.documentElement.clientHeight - this.$dialog.height()) / 2);

}

}

对了，jQuery组件开发模式是提倡配置参数来设置组件属性。这里我们也可加一个默认选项middle，默认值为true。

Modal.DEFAULTS = {

backdrop: true,

keyboard: true,

show: true,

middle: true

}