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 UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
基于vue.js实现的分页
Mar 13 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 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
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
用Python解决计数原理问题的方法
2016/08/04 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Python获取时间戳代码实例
2019/09/24 Python
ipad上运行python的方法步骤
2019/10/12 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
别名指示符是什么
2012/10/08 面试题
对教师的评语
2014/04/28 职场文书
项目建议书范文
2014/05/12 职场文书
个人简历自荐信
2014/06/26 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis