bootstrap多個modal模態框同時設置垂直居中的方法

網上目前有不少文章已經講過了怎樣使模態框點擊顯示的時候垂直居中，基本上是如下方式

$modal.on('show.bs.modal', function(){
          var $this = $(this);
          var $modal_dialog = $this.find('.modal-dialog');
          $this.css('display', 'block');
          $modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
        });

以上方法對於單個模態框仍是很是有效的，可是當項目遇到同一頁面上多個模態框的時候應該怎麼處理呢？

話很少說直接上代碼，技術含量不大，主要是解決了個小問題，以資你們參考。

$('.modal').each(function () {
//首先遍歷頁面中的.modal元素
            var modal_dialog = $(this).find('.modal-dialog');
            $(this).css('display', 'block');//先設置外層modal元素顯示，不然沒法獲取modal_dialog高度
            var m_top = ( $(window).height() - modal_dialog.height() )/2;
            modal_dialog.css('margin-top', m_top);
            $(this).css('display', 'none');//必定要還原默認的顯示方式爲隱藏，不然js可能報錯
        });

核心思想就是遍歷頁面全部modal元素，而且按照處理單一模態框的方式處理一遍，難度不大，可是調試比較費時間，發出來讓朋友們參考少走彎路。