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 相关文章推荐
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
提高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中使用Oracle数据库(5)
2006/10/09 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
解决django前后端分离csrf验证的问题
2019/02/03 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
工厂门卫岗位职责
2013/11/25 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
大型会议策划方案
2014/05/17 职场文书
房展策划方案
2014/06/07 职场文书
学风建设演讲稿
2014/09/12 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL