layer弹出层的关闭问题详解之在执行完毕后关闭当前弹出层

 更新时间:2023年10月14日 09:38:14   作者:amberom  
在前端页面中用layer打开窗口供用户输入或选择是非常常见的用法,但是有时为了完成一次操作,需要弹出多个窗口进行选择、输入或者提示,因此在关闭窗口的时候需要实现指定关闭任意窗口,需要的朋友可以参考下

前言

今天再用layui写东西的时候遇到一个问题,就是在弹出层操作完之后不知道怎么在弹出层内操作关闭这个弹出层,查阅资料之后终于找到了解决的办法。下面两段出自官网文档。

一、layer.close(index) - 关闭特定层

关于它似乎没有太多介绍的必要,唯一让你疑惑的,可能就是这个index了吧。事实上它非常容易得到。

//当你想关闭当前页的某个层时
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的,每一种弹层调用方式,都会返回一个index
layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close即可
//如果你想关闭最新弹出的层,直接获取layer.index即可
layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭   

二、layer.closeAll(type) - 关闭所有层

如果你很懒,你不想去获取index你只想关闭。那么closeAll真的可以帮上你。如果你不指向层类型的话,它会销毁掉当前页所有的layer层。当然,如果你只想关闭某个类型的层,那么你可以

layer.closeAll(); //疯狂模式,关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层    

三、关闭弹出层之后刷新父页面

例如:在增加用户的时候,增加会弹出一个新的弹窗页面,增加成功之后会有提示性的小的alert,在点击确定之后,弹窗页面关闭,并且刷新用户列表的页面数据。

只需要在关闭弹窗的时候加这个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("添加失败!");
    }
},

总结 

到此这篇关于layer弹出层的关闭问题详解之在执行完毕后关闭当前弹出层的文章就介绍到这了,更多相关layer执行完毕关闭当前弹出层内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现的JSON序列化操作简单示例

    JS实现的JSON序列化操作简单示例

    这篇文章主要介绍了JS实现的JSON序列化操作,结合简单实例形式分析了json序列化操作相关实现方法与相关注意事项,代码备有较为详尽的注释便于理解,需要的朋友可以参考下
    2018-07-07
  • Bootstrap富文本组件wysiwyg数据保存到mysql的方法

    Bootstrap富文本组件wysiwyg数据保存到mysql的方法

    这篇文章主要为大家详细介绍了Bootstrap富文本组件wysiwyg数据保存到mysql的方法,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • javascript学习之闭包分析

    javascript学习之闭包分析

    闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量。
    2010-12-12
  • 微信小程序实现两个页面传值的方法分析

    微信小程序实现两个页面传值的方法分析

    这篇文章主要介绍了微信小程序实现两个页面传值的方法,结合实例形式分析了微信小程序URL跳转及页面传值相关操作技巧与注意事项,需要的朋友可以参考下
    2018-12-12
  • js+html5绘制图片到canvas的方法

    js+html5绘制图片到canvas的方法

    这篇文章主要介绍了js+html5绘制图片到canvas的方法,涉及html5元素操作的相关技巧,需要的朋友可以参考下
    2015-06-06
  • 理解Javascript_02_理解undefined和null

    理解Javascript_02_理解undefined和null

    其实在 ECMAScript 的原始类型中,是有Undefined 和 Null 类型的。 这两种类型都分别对应了属于自己的唯一专用值,即undefined 和 null。
    2010-10-10
  • js中如何获取JSON数组的长度

    js中如何获取JSON数组的长度

    这篇文章主要介绍了js中如何获取JSON数组的长度问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • layui 关闭open弹出框 刷新table表格页面的方法

    layui 关闭open弹出框 刷新table表格页面的方法

    今天小编就为大家分享一篇layui 关闭open弹出框 刷新table表格页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 最简单的tab切换实例代码

    最简单的tab切换实例代码

    下面小编就为大家带来一篇最简单的tab切换实例代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery及JS实现循环中暂停的方法

    jQuery及JS实现循环中暂停的方法

    这篇文章主要介绍了jQuery及JS实现循环中暂停的方法,以实例形式分析了循环中暂停的原理及实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02

最新评论