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元素，而且按照处理单一模态框的方式处理一遍，难度不大，可是调试比较费时间，发出来让朋友们参考少走弯路。