JavaScript中layer关闭指定弹出窗口方法总结
更新时间：2023年10月14日 09:39:54 作者：懂事的观众GPT
这篇文章主要给大家介绍了关于JavaScript中layer关闭指定弹出窗口方法的相关资料,layer是layui的一个弹出层组件,但是可以作为独立组件使用,需要的朋友可以参考下
前言
在前端页面中，用 layer 打开窗口供用户输入或选择是非常常见的用法，但是有时为了完成一次操作，需要弹出多个窗口进行选择、输入或者提示，因此在关闭窗口的时候需要实现指定关闭任意窗口，而不能关闭错了或者乱了
这篇文章介绍了 layer 如何在多个窗口中关闭指定的窗口以及如何一次关闭所有窗口
一、关闭指定窗口
1.关闭指定窗口：layer.close(index)——推荐用法
在用 layer.open()等方法打开一个窗口，都会有一个返回值 index ，这时我们只需要记录下来每个窗口对应的返回值 index ，用layer.close(index)即可关闭指定的窗口
var index1 = layer.open(); var index2 = layer.alert(); var index3 = layer.load(); var index4 = layer.tips(); layer.close(index1);//关闭第1个窗口 layer.close(index3);//关闭第3个窗口
2.关闭最新弹出的窗口：layer.close(layer.index)
我们也可以选择不记录每次弹出的窗口的 index 值，而用 layer.index 去获取最新打开的窗口的 index ，每次将最新打开的窗口关闭
这种方法的优点在于比较简单，因为我们关闭的往往都是最新弹出的，缺点在于没办法关闭指定窗口，只能关闭最新的
layer.open(); layer.alert(); layer.load(); layer.tips(); layer.close(layer.index);//关闭最新弹出的窗口
3.iframe关闭自身：parent.layer.close(index)
和关闭指定窗口的逻辑一样，都是先获取需要关闭的窗口的 index 值，再调用 parent.layer.close(index) 实现关闭指定窗口
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //再执行关闭
二、关闭所有窗口：layer.closeAll()
layer.closeAll(); //疯狂模式，关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层 三、关闭窗口后自动刷新页面： window.parent.location.reload();
比如在添加用户信息的时候，添加完成之后一般需要自动刷新界面，显示最新的用户列表信息
success: function(data){
var res = eval('(' + data + ')');
if(res.status == '1'){
layer.msg("添加成功！");
layer.alert("添加成功！",function(){
window.parent.location.reload();//刷新父页面
parent.layer.close(index);//关闭弹出层
});
} else{
layer.msg("添加失败！");
}
}页面刷新和重新加载可以参考：JS实现页面刷新和重新加载功能（关闭当前窗口）
本文部分内容参考自：layer弹出层的关闭问题——在执行完毕后关闭当前弹出层
总结
到此这篇关于JavaScript中layer关闭指定弹出窗口方法的文章就介绍到这了,更多相关JS layer关闭指定弹出窗口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了Ajax请求时无法重定向的问题解决代码详解，当使用Ajax请求时，如果后台进行重定向到其他页面时是无法成功的，只能在浏览器地址栏输入才能够实现重定向。下面我们来看看解决方法吧2019-06-06
体验js中splice()的强大(插入、删除或替换数组的元素)
javascript splice()算是最强大的了，它可以用于插入、删除或替换数组的元素。下面来一一介绍,感兴趣的朋友2013-01-01
在 JavaScript 中获取二维数组最大值的多种方法,包括基础循环、高阶函数、递归等技术,并提供性能比较和使用建议,本文就通过代码示例来给大家详细说说,需要的朋友可以参考下2025-12-12
这篇文章主要介绍了用js如何实现将手机号中间的几位数字变成**** _,今天，我们要实现一个很常见并且简单的功能如何将手机号中间的几位数变成****，需要的朋友可以参考下2023-09-09
这篇文章主要介绍了JS的async/await怎么使用,简单来说，async/await是基于promises的语法糖，使异步代码更易于编写和阅读,下面来看详细的介绍内容吧。需要的小伙伴也可以参考一下2021-12-12
这篇文章主要为大家详细介绍了js改变透明度实现轮播图的算法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家详细介绍了js实现滑块区间组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
cookie 是存在有效期的，在默认情况下，一个 cookie 的生命周期就是在浏览器关闭的时候结束，本文给大家介绍关于javascript对于cookie的简单操作，比如对于cookie的写入和删除，代码简单易懂，需要的朋友参考下2015-11-11
这篇文章主要介绍了微信浏览器下拉黑边解决方案 wScroollFix,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
这篇文章主要给大家介绍了three.js中文文档学习之创建场景的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
最新评论