layer关闭一个弹窗后又打开一个弹窗失败的问题

经搜索发现原因是

来源:使用Layer弹窗时遇到Layer.Close()后dom元素延迟性销毁的问题 @Gyb - 博客 - 编程圈

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

在编写专题图功能时,有一个场景为打开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的源代码发现有下列代码:

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

我自己用清空windowA的内容元素的方法,但还是打不开新的弹窗,因为问题的根本是延迟销毁元素,所以采用写一个延迟的方法解决了这个问题。

setTimeout(function () {},1000)

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
下面是一个简单的 layer 弹窗封装示例,可以在网页中使用: ```html <!-- 引入 layer 的样式文件和脚本文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/theme/default/layer.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script> <!-- 自定义样式 --> <style> .layer-popup { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .3); z-index: 9999; } </style> <!-- 弹窗 HTML 结构 --> <div class="layer-popup"> <div class="layer-popup-title">弹窗标题</div> <div class="layer-popup-content">弹窗内容</div> <div class="layer-popup-buttons"> <button class="layer-popup-ok">确定</button> <button class="layer-popup-cancel">取消</button> </div> </div> <!-- 弹窗脚本代码 --> <script> function layerPopup(title, content, okCallback, cancelCallback) { // 创建 layer 弹窗 var $popup = $('.layer-popup'); $popup.find('.layer-popup-title').text(title); $popup.find('.layer-popup-content').html(content); $popup.show(); // 绑定按钮事件 $popup.find('.layer-popup-ok').click(function() { $popup.hide(); if (okCallback) { okCallback(); } }); $popup.find('.layer-popup-cancel').click(function() { $popup.hide(); if (cancelCallback) { cancelCallback(); } }); } </script> ``` 使用时,可以调用 `layerPopup` 函数弹出弹窗,例如: ```javascript layerPopup('提示', '确定要删除吗?', function() { // 点击确定按钮后的回调函数 console.log('点击了确定按钮'); }, function() { // 点击取消按钮后的回调函数 console.log('点击了取消按钮'); }); ``` 在实际应用中,需要根据具体的需求进行调整和优化,例如添加更多的样式和选项,支持异步操作等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值