bootstrap modal垂直居中

修改bootstrap.js 源码：

带着问题读js库源码，往往能学到不少知识；本着怎样让 modal组件自动居中目的，开始跟踪组件弹窗时对应的事件；
打开bootstrap.js ctrl+f 找到 modal对应代码：

var Modal = function (element, options) { 
}
Modal.VERSION = '3.3.2'
Modal.TRANSITION_DURATION = 300
Modal.BACKDROP TRANSITION_DURATION = 150
Modal.DEFAULTS = {
}
Modal.prototype.toggle = function (_reLatedTarget) {
return this.isShown ? this.hide( ) : this.show(_relatedTarget)
}
Modal.prototype.show = function (_ relatedTarget) { 
}
Modal.prototype.hide = function (e) {
}
Modal.prototype.enforceFocus = function () {
}

弹出框出现时，调用的自然是 Modal.prototype.show() 方法，而show 方法中又调用了 that.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: ''
            })
}

以上代码看来，官方要实现垂直居中简直太容易，而他们没有，只能说国外同行网站布局观跟俺们还是有区别的。加上少量代码：

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: ''
            })
    // 是弹出框居中。。。
    var $modal_dialog = $(this.$element[0]).find('.modal-dialog');
    var m_top = ($(window).height() - $modal_dialog.height()) / 2;
    $modal_dialog.css({
        'margin' : m_top + 'px auto'
    });
}

然后就实现modal垂直居中了。

总结：

总的来说两方案都能实现优雅的垂直居中效果，而实际网站开发中页面多弹出框自然不止一个；修改源码就不用在每个页面调用bootstrap事件，故本人更倾向于方案2。

bootstrap modal垂直居中

修改bootstrap.js 源码：

总结：

推荐阅读更多精彩内容