Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
更新时间：2017年02月27日 11:51:36 作者：oldlock
这里也会遇到一次性关闭所有modal引起阴影遮罩的问题，也就是所有modal都关闭了，但是主页面仍然被阴影遮罩。下面通过本文给大家分享解决方案，需要的朋友参考下吧
上篇我提到的‘多弹窗之叠加显示不出弹窗问题'
这里也会遇到一次性关闭所有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 多弹窗之叠加关闭阴影遮罩问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了JavaScript中Array实例方法map的实现方法,map() 方法创建一个新数组,其结果是原数组中的每个元素都调用一个提供的函数后返回的结果,文中有详细的代码示例供大家参考,需要的朋友可以参考下2024-03-03
bootstrap开发标签页时，标签页显示正常，但点击时候对应内容区域没有变化。接下来通过本文给大家分享BootStrap 页签切换失效的解决方法，感兴趣的朋友一起看看吧2017-08-08
tabBar如果应用是一个多tab应用,可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页,下面这篇文章主要给大家介绍了关于uniapp小程序配置tabbar底部导航栏的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了深入学习JavaScript中的promise，Promise对象的主要⽤途是通过链式调⽤的结构，将原本回调嵌套的异步处理流程，转化成“对象.then().then()...”的链式结构2022-06-06
js 模块化CommonJS AMD UMD CMD ES6规范详解
这篇文章主要为大家介绍了js 模块化CommonJS AMD UMD CMD ES6规范详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
这篇文章主要介绍了javascript实现在某个元素上阻止鼠标右键事件的方法和实例,需要的朋友可以参考下2014-08-08
最近在做一个小项目，引入了第三方js文件，这个文件会调用XMLHttpRequest向服务器发送 Ajax请求，但是我有需要监听其Ajax请求的某些事件，以便额外地执行其他脚本。于是稍微看了看监听 Ajax请求的事件方法，在这里分享给大家。有需要的朋友们可以参考借鉴。2016-08-08
2013-11-11
这篇文章主要介绍了浅谈一个webpack构建速度优化误区，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
在Chrome FF里都能改变成功，但在IE下却不行，网上搜了半天，大概了解了，这个是IE的一个bug，具体的解决方法如下，有类似问题的朋友可以参考下哈，希望对大家有所帮助2013-07-07
最新评论