网络编程 
首页 > 网络编程 > 浏览文章

Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法

(编辑:jimmy 日期: 2025/9/25 浏览:3 次 )

上篇我提到的‘多弹窗之叠加显示不出弹窗问题'

这里也会遇到一次性关闭所有modal引起阴影遮罩的问题,也就是所有modal都关闭了,但是主页面仍然被阴影遮罩.

这个问题从哪来的,是因为modal叠加,我们点击窗口之外的空白部分,一次性关闭所有model,但是modal自己生成的'.modal-backdrop'只关闭了一个,其余的依然存在, 导致阴影遮罩.

这里的解决办法是

1.第一种禁用modal 点击空白自动关闭的功能。

   tempModal.modal({
    backdrop:"static"
  })

也就是只能点击关闭按钮,一层一层关闭,避免发生多层关闭的问题。

2.第二种在最外层的modal关闭时,手动删除所有遮罩

 $("#tempModal").bind('hide.bs.modal',function(){
   $(".modal-backdrop").remove();
  })

这里好处是,保留了点击空白自动关闭的功能

以上所述是小编给大家介绍的Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

上一篇:PHP实现本地图片上传和验证功能
下一篇:flag和jq on 的绑定多个对象和方法(必看)
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap