bootstrap中设置modal-dialog的居中及显示宽度大小

首先，bootstrap的弹出框默认是居顶的，没有居中，此时，可修改bootstrap的源码，bootstrap.js,修改如下

 //注释掉原先的弹出框居顶显示
  // 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'});
  }
  //添加修改弹出框居中显示结束

如上修改，bootstrap的弹出框就会居中；

其次，默认情况下弹出框的宽度比较小，不适合我的要求，对此，bootstrap的modal-dialog提供了三个选项，大、默认、小

modal-lg（最大）    默认（中）   modal-sm（最小）

修改

即可，如下

  

    
    

      

        

          
          

            
              ×
            
            

              新增用户信息
            
          
          

            
          
        

      

    

方案二：

很多时候不让动源码，那就老老实实的在各自的业务代码中修改；code如下：

/**
   * 弹出框打开前事件
   * 用于捕获弹出框弹出前事件，并且设置弹出框居中显示及自定义操作等
   * @param {string} modalId 弹出框div 定义的id
   */
  beforeModalOpen(modalId: string) {
    $('#' + modalId).on('show.bs.modal', function (e) {
      //=====================设置弹出垂直居中显示===========================//
      $(this).css('display', 'block');
      var modalHeight = $(window).height() / 2 - $('#' + modalId + ' .modal-dialog').height() / 2;
      $(this).find('.modal-dialog').css({
        'margin-top': modalHeight
      });
      //弹出框打开前自己需要实现的业务
      
    });
  }