使用Layer弹窗时遇到Layer.Close()后dom元素延迟性销毁的问题 @Gyb

最新推荐文章于 2024-01-26 15:34:10 发布
最新推荐文章于 2024-01-26 15:34:10 发布
阅读量1.8k 收藏 1
点赞数 1
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/u/3756527/blog/1605744
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

在编写专题图功能时，有一个场景为打开A专题数据windowA后，查询时间改变后需要重新渲染打开window，这时候执行windowA.close();windowB.open()，发现windowB中的统计图模块没有渲染出来，经调试发现，在执行统计图渲染时，windowA虽然关闭了，但是dom中还存在windowA的内容，导致统计图渲染时发现渲染容器ID存在两个，heightCharts没有报错，但是也无法正确渲染。

按照Layer的官方文档描述，调用Close()方法后会销毁layer元素。但是没有找到销毁元素是否有延迟存在。在Layer的论坛中也没有找到这种问题的解决方法。

采取了一种笨方法，在windowA.close()之前，清空windowA的内容元素，然后执行windowB.open()。

元素销毁的延迟性很难发现，只有跟js的执行语句的同时查看dom的变化才能发现，耗费了不少时间。

后续查看layer的源代码发现有下列代码：

183147_UIej_3756527.png

其中发现3.0增加isOutAnim属性默认为true，导致延迟200毫秒执行销毁dom元素。需要设置isOutAnim:true

转载于:https://my.oschina.net/u/3756527/blog/1605744

weixin_33854644
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layer.js之回调销毁对话框的例子
10-16
今天小编就为大家分享一篇layer.js之回调销毁对话框的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
GYB创业培训心得体会.doc
10-10
GYB创业培训心得体会.doc
Layer弹出层销毁的问题
qq_41590119的博客
09-23 1995
最近解决一个问题发现的 感觉应该挺多人遇到 记录一下： 在一张地图上有多个地块图层，在点击某个地块的时候会请求属性信息并且以layui弹窗形式展示出来。遇到的情况是单次点击会显示正常，可是连续点击且不关闭原窗口的情况下就会出现 后续打开的窗口无法渲染问题，看了半天才发现是调用layer.close()时有个延时销毁，导致新窗口打开时旧的dom节点没有来得及销毁，这样在通过id或class寻找元素时可能会找到之前的旧元素，导致新窗口没有被渲染出来 有过渡动画就会有延迟时间，所以查询较快就会出错， .
layer 延时设置
l_degege的专栏
09-09 5680
$.ajax({ type: 'post', url: "/monitor/demos/testDemos", data: {}, dataType: 'json', success: function (result) { if (result.flag ==true) { $("#confirm").text("...
layui框架——弹出层layer
热门推荐
meixu568的专栏
07-26 9万+
两种调用方法： 1、引用独立的layer.js文件 引入好layer.js后，直接用即可 <script src="layer.js"></script> <script> layer.msg('hello'); </script> 2、调用layui中的layer模块 layui.use('layer', function(){ ...
layer.closeAll()无法关闭弹窗的解决办法之一
weixin_30411239的博客
06-26 719
parent.layer.closeAll() 转载于:https://www.cnblogs.com/ziyoublog/p/9227591.html
layer中close的问题
haohan_lt的博客
07-07 1504
相信大家在使用layer弹框的时候会常常遇到关闭弹窗的问题下面为关闭弹窗的方法 layer.close(index)- 关闭特定层 //当你想关闭当前页的某个层时 var index = layer.open(); var index = layer.alert(); var index = layer.load(); var index = layer.tips(); //正如你看到的，每一种弹层调用方式，都会返回一个index layer.close(index); //此时你只..
layer closeAll 无法关闭弹窗的解决办法之一
qq_44939836的博客
04-19 1559
layer closeAll 无法关闭弹窗的解决办法之一
layui关闭最上层弹窗失败的其中一个原因
easonjake的博客
05-11 659
为了方便，我们一般使用layer.close(layer.index);关闭最后加载出来的弹窗。但是如果找个弹窗的内容是一个表单，并且进行了表单验证，当验证失败时，layui会给出一个提示框，提示验证失败，这样的提示框也是会增加layer.index的值的。所以有了提示之后，layer.close(layer.index)就不能关闭我们的弹窗了，因为layer.index已经变了，不指向我们的弹窗。另外layui的异常提示层模式（lay-verType）不管是哪个方式，都会增加layer.index的值。
layer.open参数；layer.open关闭事件；layer.open关闭刷新；layer.open获取子页的值；layer.open调用子页面的方法
qq_31541911的博客
10-11 2629
父页面 function layerOpen() { layer.open({ type: 2, shade: [0], title: "验收申请", area: ['1024px', '680px'], btn: ['按钮1', '按钮2'], //只是为了演示 //time: 2000, //2秒后自动关闭 fixed: true, shadeClose: false, //开启遮罩关闭 co...
gyb.rar_原理图_扩频通信_扩频通信原理
09-23
扩频原理图用于做扩频通信使用，此图是基于matlab的原理图
gyb.rar_matlab扩频通信_原理图_扩频_扩频通信
09-14
扩频原理图用于做扩频通信使用，此图是基于matlab的原理图
gyb的含义是.pdf
03-11
。
gyb的含义是.docx
03-11
。
layui 跨域弹窗，留言成功后关闭弹窗，iframe与主框架跨域相互访问方法
橙-极纪元-cplvfx-JJY.Cheng
03-07 4168
背景描述 B域名作为主域，所有的留言信息都会在B域名的留言列表里。 所有的留言：指的是A、B、C、D、E、F、G域名网站的留言信息都会放到B域名里面 1、A域名 （展示页）用于：点击按钮激活弹窗 去调用B域名的留言页面 2、B域名 （主框架）用于：接受所有其他网站的留言信息 3、A域名closelayer.htm （关闭展示页的弹窗页）用于：调用A域名展示页 的关闭弹窗方法 实现...
Layui中弹出层关闭后但是弹出层中的内容依然显示在页面上，没有消失
qq_39517116的博客
02-18 1892
var index = layer.open({ title: “新增”, type: 1, content: $("#editForm"), end: function () { // 通过js获取Id然后进行隐藏 $(’#editForm’).hide(); vm.showForm = false; layer.closeAll(); } });
layui关闭iframe弹出层，方法失效
最新发布
java_csdnn的博客
01-26 497
关于在弹出层中关闭自身失效的问题
关于layui关闭自身iframe弹窗
weixin_44967580的博客
06-09 270
方法： var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); 直接在弹窗的页面方法里写入这两句即可
使用layUI下弹出iframe窗口关闭的问题
ddu1780的博客
07-25 370
代码如下： var index = parent.layer.getFrameIndex(window.name); function closeLayer() { parent.layer.close(index); } 转载于:https://www.cnblogs.com/ys15/p/11247014.html...
使用node.js创建一个学生管理系统
07-08
好的，我可以给你一个简单的学生管理系统的示例。首先，你需要安装node.js和一些相关的包。然后创建一个名为`student-management-system`的文件夹，进入该文件夹，执行以下命令： 1. 初始化npm ```bash npm init -y ``` 2. 安装express和body-parser ```bash npm install express body-parser --save ``` 3. 创建一个名为`app.js`的文件，并输入以下代码： ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); let students = []; app.get('/', (req, res) => { res.send('Welcome to Student Management System'); }); app.get('/students', (req, res) => { res.send(students); }); app.get('/students/:id', (req, res) => { const student = students.find(s => s.id === parseInt(req.params.id)); if (!student) return res.status(404).send('The student with the given ID was not found.'); res.send(student); }); app.post('/students', (req, res) => { const student = { id: students.length + 1, name: req.body.name, email: req.body.email, phone: req.body.phone }; students.push(student); res.send(student); }); app.put('/students/:id', (req, res) => { const student = students.find(s => s.id === parseInt(req.params.id)); if (!student) return res.status(404).send('The student with the given ID was not found.'); student.name = req.body.name; student.email = req.body.email; student.phone = req.body.phone; res.send(student); }); app.delete('/students/:id', (req, res) => { const student = students.find(s => s.id === parseInt(req.params.id)); if (!student) return res.status(404).send('The student with the given ID was not found.'); const index = students.indexOf(student); students.splice(index, 1); res.send(student); }); const port = process.env.PORT || 3000; app.listen(port, () => { console.log(`Listening on port ${port}...`); }); ``` 以上代码会创建一个express应用程序，并提供以下API： - GET /students：获取所有学生信息 - GET /students/:id：根据ID获取学生信息 - POST /students：创建新的学生 - PUT /students/:id：更新学生信息 - DELETE /students/:id：删除学生信息 4. 运行应用程序 ```bash node app.js ``` 现在你可以使用Postman或其他HTTP客户端测试API了。注意，这是一个非常简单的示例，你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值