bootstrap模态框弹出居中显示

在项目中，有几个使用bootstrap模态框弹出问题，在单页面上是居中显示，但是嵌套在别的iframe中，弹出的位置在靠近顶部的位置。
查阅了一些资料，有几种解决方案，1修改bootstrap的js文件，使弹出的位置居中 2在每个页面弹出时，修改弹出的位置 3把bootstrap模态框弹出iframe的最外层
在实际操作中，使用第一种方式，会影响到其他使用到bootstrap的相关的未知影响，第三种方式，我虽然把数据弹到最外层，但是双向绑定的数据不能传递，有些使用的插件效果也失效。所以我采用的是第二种方式。

可以通过监听事件来控制单个模态框弹出位置

 我们可以选择show.bs.modal来控制模态框弹出位置，以下是实现代码：
 

$('#myModalDialog').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) });
    
});

$("#myModalDialog").modal({backdrop: false, keyboard: false});