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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yyj108317/article/details/82656528

首先,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
      });
      //弹出框打开前自己需要实现的业务
      
    });
  }

 

展开阅读全文

没有更多推荐了,返回首页