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

最新推荐文章于 2024-08-13 08:10:33 发布

白不懂黑的静

最新推荐文章于 2024-08-13 08:10:33 发布

阅读量2w

点赞数 3

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/yyj108317/article/details/82656528

版权

bootstrap 专栏收录该内容

6 篇文章 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 >
    <!-- 新增模态框（Modal） -->
    <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">
          <!--style="background-color: black;color: white"-->
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="addFormLabel">
              新增用户信息
            </h4>
          </div>
          <div class="modal-body">
            <app-sysuser-form [user]="selectedUser"></app-sysuser-form>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </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
      });
      //弹出框打开前自己需要实现的业务
      
    });
  }