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 相关文章推荐
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
js+audio实现音乐播放器
Sep 13 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设计模式 Composite (组合模式)
2011/06/26 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
python线程池的实现实例
2013/11/18 Python
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
Python threading的使用方法解析
2019/08/28 Python
python3实现高效的端口扫描
2019/08/31 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Python中os模块功能与用法详解
2020/02/26 Python
python实现图像拼接
2020/03/05 Python
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
中专生的个人自我评价
2013/12/11 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
应聘教师求职信范文
2015/03/20 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB