bootstrap 彈窗默認打開_bootstrap 模态窗口 多重/多个弹窗滚动条补丁

由于bootstrap的模态窗口默认不支持多次弹出, 在关闭的时候会有滚动条消失的问题. 经过观察和查看源码, 发现在开启和关闭的时候会在body上增加/减少一个"modal-open"的class,所以只要在关闭的时候判断一下是否还有没关闭的窗口, 如果还有未关闭的, 则重新给body加上"modal-open"即可.

以下是代码:

//bootstrap 多重modal弹窗滚动条补丁.

$('body').on('hide.bs.modal', 'div.modal[role]', function(e) {var len = $('div.modal[role]').length;if (len > 1) {

setTimeout(function() {

$("body").addClass("modal-open");

},500);

}

});

这里处理的有点麻烦, 做了个延迟500ms, 是由于"hide.bs.modal"的触发时机过早, 模态窗体自带的"hidden.bs.modal"无法像上面代码那样触发,(麻烦哪位路过的大神给指个路.). 在事件触发之后才执行了removeClass("modal-open") . 关于这个, 大家可以去看下bootstrap.js里面的源码.搜索 "modal-open"即可找到相关代码.

如果您觉得这篇博客对您产生了一些必要的帮助,  欢迎您对我意思意思, 我将会觉得您非常够意思!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值