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


Posted in Javascript onFebruary 27, 2017

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

这里也会遇到一次性关闭所有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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
提高Web性能的前端优化技巧总结
Feb 27 #Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 #Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 #Javascript
JavaScript中数组Array方法详解
Feb 27 #Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 #Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 #Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 #Javascript
You might like
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
jQuery 位置插件
2008/12/25 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
JS实现图片切换特效
2019/12/23 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
.net工程师笔试题
2012/06/09 面试题
幼儿教师自我鉴定
2013/11/02 职场文书
小班下学期评语
2014/05/04 职场文书
捐书倡议书
2014/08/29 职场文书
庆七一宣传标语
2014/10/08 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
canvas多重阴影发光效果实现
2021/04/20 Javascript
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL