bootstrap modal垂直居中

時間 2019-11-08

原文原文鏈接

　　使用過bootstrap modal（模態框）組件的人都有一種困惑，好好的一個彈出框怎麼就沒法垂直居中了呢？固然網上一些前輩也給出了很多答案，感受不太全並且針對的都是各自的項目難以給我等小白太直觀的理解。於是手癢試試寫個稍微完整點的解決方案，做爲總結及往後回顧之用。javascript

　　項目中的bootstrap版本是3.X , 做爲項目後臺使用。在項目進行過程當中遇到組件彈出框沒法垂直居中，示例demo代碼以下：css

<!DOCTYPE html>
<html>
  <head>
    <title>bootstrap modal 垂直居中測試</title>
    <link href="bootstrap.css" rel="stylesheet">
    <meta charset="utf-8">
  </head>
  <body>
    
    <button type="button" id="modalBtn" class="btn btn-primary">點擊彈出modal</button>

    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal 標題</h4>
          </div>
          <div class="modal-body">
            <p>內容&hellip;</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
            <button type="button" class="btn btn-primary">肯定</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <script src="jquery-1.10.2.min.js"></script>
    <script src="bootstrap.js"></script>

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

  </body>
</html>

彈出的效果是這樣的：html

當點擊按鈕時modal的位置看起來很不舒服，解決辦法總結有兩：java

1.使用modal 彈出事件方法；jquery

　　從官方文檔中能夠了解到， modal組件有很多事件接口：bootstrap

其中「shown.bs.modal」能夠在彈窗框出現後作一些處理，更改彈出框的樣式固然是能夠的：dom

    <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('shown.bs.modal', function(){
          var $this = $(this);
          var $modal_dialog = $this.find('.modal-dialog');
          var m_top = ( $(window).height() - $modal_dialog.height() )/2;
          $modal_dialog.css({'margin': m_top + 'px auto'});
        });
      });
    </script>

該實現方式彈出框是居中了，但彈出時有一些遲疑後抖動到中部；不是特別理想，接下來試試第二種方式；佈局

ps:測試

　　該方案個人代碼實現的不太好，感謝園友提供的外國連接，實現效果更好一些，代碼以下：網站

<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>

2.修改bootstrap.js 源碼；

　　帶着問題讀js庫源碼，每每能學到很多知識；本着怎樣讓 modal組件自動居中目的，開始跟蹤組件彈窗時對應的事件；

打開bootstrap.js ctrl+f 找到 modal對應代碼：

彈出框出現時，調用的天然是 Modal.prototype.show() 方法，而show 方法中又調用了 that.adjustDialog() 方法：

以上代碼看來，官方要實現垂直居中簡直太容易，而他們沒有，只能說國外同行網站佈局觀跟俺們仍是有區別的。加上少許代碼：

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'});
  }