bootstrap3 弹出框上下居中例子

1、修改bootstrap3 bootstrap3.css文件让弹出框上下居中

@media (min-width: 768px) {

  .modal-dialog {
    width: 600px;
    margin: 300px auto;    //修改此处  默认是30px的
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }

}

2、修改bootstrap.js源码Modal.prototype.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 : ''
    })
    
    /**设置弹出框上下居中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 = (clientHeight - dialogHeight)/2;  
    $modal_dialog.css({'margin':m_top + 'px auto'}); 
    /**设置弹出框上下居中end**/
  }