网上目前有很多文章已经讲过了怎样使模态框点击显示的时候垂直居中，基本上是以下方式

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