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 相关文章推荐
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
JS画5角星方法介绍
Sep 17 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
js的延迟执行问题分析
Jun 23 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 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
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
PHP7修改的函数
2021/03/09 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
jquery编写日期选择器
2017/03/16 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
python logging类库使用例子
2014/11/22 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
python实现自动解数独小程序
2019/01/21 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python实现控制COM口的示例
2019/07/03 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
Python调用JavaScript代码的方法
2020/10/27 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
盛大笔试题
2016/11/05 面试题
环境工程大学生自荐信
2013/10/21 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
产品设计开发计划书
2014/05/07 职场文书
后备干部培训方案
2014/05/22 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
公司授权委托书范文
2014/09/21 职场文书
个人借款协议书范本
2014/11/17 职场文书
小学校本教研总结
2015/08/13 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android