bootstrap modal垂直居中 （轉）

weixin_33896726發表於2017-02-20
boot

 根據博友的經驗，總結後請使用方法一就行了

一，修改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;//瀏覽器高 - 模態框高 再 / 2
    $modal_dialog.css({'margin': m_top + 'px auto'});
  }

如果垂直居中了

 

二，jquery中

<script type="text/javascript">
      $(function(){
        // dom載入完畢
        var $m_btn = $('#modalBtn');
        var $modal = $('#myModal');
        $m_btn.on('click', function(){
          $modal.modal({backdrop: 'static'});
        });

        // 測試 bootstrap 居中
        $modal.on('show.bs.modal', function(){
          var $this = $(this);
          var $modal_dialog = $this.find('.modal-dialog');
          // 關鍵程式碼，如沒將modal設定為 block，則$modala_dialog.height() 為零
          $this.css('display', 'block');
          $modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
        });
        
      });
    </script>

 這裡參考這位博友吧：http://www.cnblogs.com/zzj-suxiao/articles/5460972.html

 

相關文章