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

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值