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实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 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/10/09 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
Python 流程控制实例代码
2009/09/25 Python
python中redis的安装和使用
2016/12/04 Python
Python制作词云的方法
2018/01/03 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
wxPython实现文本框基础组件
2019/11/18 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
校园餐饮创业计划书
2014/01/10 职场文书
离婚协议书标准格式
2014/10/04 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书