bootstrap使用Modal,关闭弹框遗留遮罩层
前两天,用公司封装的框架,写了一个弹框,两个弹框操作相隔时间很短,第二个弹框出现遮罩层。
// 手动清除
$(".modal-backdrop").remove();
发现弹框关闭后滚动条不好使。然后f12查看,发现modal-open未关闭,之后再执行
$("body").removeClass('modal-open');
问题就可以解决了。
不过,这种方法虽然简单,但是总觉得有点土。
下面,说一下第二种方法,给第二个弹框加一个延迟:
$("#modal").modal("hide");
setTimeout(function(){//延时加载页面
show();// modal关闭后,要展示的页面
},500);
后来询问前端的同事才知道,js虽然单线程往下执行,但当遇到样式渲染、dom操作时,就有同步异步的问题,也就是说,当$("#modal").modal("hide");执行完,但有可能modal('hide')里面的样式操作,dom操作还没有渲染完,showRation()方法就把页面刷新了或者加入了新的html,页面重新渲染,而modal可能还没有执行完样式删除,modal有样式残余,就出现了这个问题。
bootstrap使用Modal,关闭弹框遗留遮罩层相关推荐
- vueDialog弹框被遮罩层挡住
给dialog弹框添加下面的属性 :modal-append-to-body='false' //遮罩层是否插入至 body 元素上, //若为 false,则遮罩层会插入至 Dialog 的父元素上
- Vue ELement弹框被遮罩层挡住
分享一个小哥哥的文章,问题已解决,分析的很透彻,希望对大家有帮助 https://blog.csdn.net/mr_javascript/article/details/80888681
- 实现点击弹框外关闭弹框功能
点击弹框外关闭弹框 核心是监听全局点击事件,通过判断点击时的dom元素是否包含在弹框的dom中,即弹框dom.contains(event.target) <body><div cl ...
- Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
问题描述 问题分析 1)若dialog弹出框,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级) Element UI中设置了modal-append-to-body='tru ...
- element-ui框架的el-dialog弹出框被遮罩层挡住了
如图: 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果: 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释:翻译成 ...
- h5移动端实现物理返回键关闭弹框而非返回上一级页面
需求:页面中的popup弹框,可以通过物理返回键进行关闭 方案: (1)当打开弹框时,向history中添加一个空记录,并且监听history的popstate变化 (2)当弹框打开状态用户操作了返回 ...
- 小程序点击多个指定地方都能关闭弹框
比如在popupDom和text这里都需要关闭当前这个弹框 可以给他们定义一个一样的事件data-target="self" catchtap='hideBaitiaoView' ...
- dialog 弹出框,遮罩层覆盖内容
写完项目没太注意,并且情况是偶尔发生,点击dialog 的弹出框的时候,灰色遮罩层会覆盖内容上面, 这样的话可能是由于我们会发现浏览器遮罩层高于盒子遮罩层,会照成这样的问题,也有可能是我们给父元素加了 ...
- element-ui:el-autocomplete实现搜索结果多次点击不关闭弹框
实现需求 通过搜索,将搜索结果关联到当前页面的对象,原来点击一下就关联,弹框关闭 现在需要支持同一个搜索结果多次点击关联,加快处理速度 实现效果 实现思路 将捕获点击事件,并且阻止传播 @click. ...
最新文章
- mamp python mysql_Python,MySQL,MAMP怎么做?
- python rfind函数用法_Python语法速查:字符串格式简单处理、子串查找与判断方法?...
- iOS 配置pch文件
- hadoop join
- 【转】pthread mutex 基本用法
- 如何应对互联网界的奇葩面试题!
- 如何启动免安装版Tomcat并将Tomcat添加到服务中
- sublime c 语言 编译,默认情况下,将程序编译为Sublime Text 3中的c 14
- splay学习小记[未完结]
- [转载] python日期时间使用详解和定时器使用讲解
- Could not open Hibernate Session for transaction, 数据库连接超时解决方法
- python 中类与对象
- @excel 注解_SpringBoot中关于Excel的导入和导出
- JVM调优总结-调优方法
- java多线程(1)----多线程的概述
- mysql自定义函数优点_MySQL自定义函数
- 使用MATLAB绘制Smith圆图
- 学会Zynq(15)UDP sendto函数的使用
- CRM系统之数据库设计
- 计算机派位志愿填报技巧,小升初电脑派位操作流程详解