bootstrap模态框弹出居中显示

时间:2019-01-10
本文章向大家介绍bootstrap模态框弹出居中显示,主要包括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});

 

上一页 下一页

原文地址:http://www.manongjc.com/article/42203.html

上一篇:html总结

下一篇:用栈实现队列