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程序 入门者学习
Jul 09 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 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中引用符号(&)的使用详细介绍
2016/12/06 PHP
简单的php购物车代码
2020/06/05 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
python获得一个月有多少天的方法
2015/06/04 Python
Python回调函数用法实例详解
2015/07/02 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
业务主管岗位职责范本
2013/12/25 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android