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

灰太狼 2022-05-13 09:56 1258阅读 0赞

首先，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（最小）

修改<div class="modal-dialog modal-lg">即可，如下

<div #mymodel >
        
        <div class=" modal fade" id="addFormModal" tabindex="-1" role="dialog" aria-labelledby="addFormLabel"
             aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  ×
                </button>
                <h4 class="modal-title" id="addFormLabel">
                  新增用户信息
                </h4>
              </div>
              <div class="modal-body">
                <app-sysuser-form [user]="selectedUser"></app-sysuser-form>
              </div>
            </div>
          </div>
        </div>

方案二：

很多时候不让动源码，那就老老实实的在各自的业务代码中修改；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
          });
          //弹出框打开前自己需要实现的业务
          
        });
      }