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 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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类声明和php类使用方法示例分享
2014/03/29 PHP
php并发加锁示例
2016/10/17 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
基层工作经历证明
2014/01/13 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
高中生班主任评语
2014/04/25 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
民间个人借款协议书
2014/09/30 职场文书