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

但有时我们页面比较长，想要就在浏览的位置弹出，可以利用点小技巧

$('#myModalDialog').on('show.bs.modal', function () {
    var $this = $(this);
    var $modal_dialog = $this.find('.modal-dialog');
    $this.css('display', 'block');
    // 点击事件传入event参数，通过enent.clientY可以取到当前点击处到页面顶端的高度
    var marginTop = event.clientY;
    // 但显示的地方就正好是点击处，还是不太满意，可以使用滚动条的高度来实现
    if (parent.$('.scrollbar').length > 0) {
        marginTop = parent.$('.scrollbar').scrollTop();
    }
    $modal_dialog.css({'margin-top': marginTop});
});
$("#myModalDialog").modal({backdrop: true, keyboard: false});