Bootstrap modal 模态框垂直居中显示补丁

<script>
    $.fn.modal.Constructor.prototype.adjustDialog1 = 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 = (document.documentElement.clientHeight - dialogHeight)/2; $modal_dialog.css({'margin':m_top + 'px auto'}); /**设置弹出框垂直居中end**/ } </script>

红色部分为我们的处理逻辑,绿色部分为Bootstrap原生的处理函数,直接拷贝:

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 : ''
    })
}

via:https://blog.csdn.net/yucaifu1989/article/details/51425424