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制作符合Web标准的QQ弹出消息
Jan 14 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
js键盘事件的keyCode
Jul 29 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 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防注入漏洞过滤函数代码
2012/04/11 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
vue2配置scss的方法步骤
2019/06/06 Javascript
django基础之数据库操作方法(详解)
2017/05/24 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
英语简历自我评价
2014/01/26 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
营销与策划实训报告
2014/11/05 职场文书
2014年环保局工作总结
2014/12/11 职场文书
Python之matplotlib绘制折线图
2022/04/13 Python