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 相关文章推荐
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
js简单抽奖代码
Jan 16 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
JavaScript表单验证开发
Nov 23 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
简单理解Vue中的nextTick方法
Jan 30 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 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作为Shell脚本语言使用
2006/10/09 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
PHP数组实例详解
2016/06/26 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
php实现数字补零的方法总结
2018/09/12 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
解析Python中的二进制位运算符
2015/05/13 Python
python 网络爬虫初级实现代码
2016/02/27 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
python speech模块的使用方法
2020/09/09 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
公司联欢会策划方案
2014/05/19 职场文书
公司表扬稿范文
2015/05/05 职场文书
学生会干部任命书
2015/09/21 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
golang生成并解析JSON
2022/04/14 Golang
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL