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 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
vuex入门最详细整理
Mar 04 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使用cookie保存登录用户名的方法
2015/01/26 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
node.js require() 源码解读
2015/12/13 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
Python pickle模块用法实例
2015/04/14 Python
python生成式的send()方法(详解)
2017/05/08 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python OS模块实例详解
2019/04/15 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
python set集合使用方法解析
2019/11/05 Python
NumPy中的维度Axis详解
2019/11/26 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
转党组织关系介绍信
2014/01/08 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang