Bootstrap 模态框垂直居中

默认下Bootstrap模态框水平居中，但不垂直居中，上边距为40px。本文将介绍怎样扩展Bootstrap模态框，让它支持垂直居中。

问题

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

解决办法

我的第一反应是使用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
}

查看效果

• 效果截图如下：

• 点击访问github查看工程源码。
• 点击访问github查看效果页面。