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 last-child 列表最后一项的样式
Jan 22 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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中,文件上传
2006/12/06 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python对列表排序的方法实例分析
2015/05/16 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
How TDD works
2012/09/30 面试题
后勤人员自我评价怎么写
2013/09/19 职场文书
机关财务管理制度
2014/01/17 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
MySQL插入数据与查询数据
2022/03/25 MySQL