快捷導(dǎo)航

JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法總結(jié)

更新時(shí)間：2023年10月14日 09:39:54 作者：懂事的觀眾GPT

這篇文章主要給大家介紹了關(guān)于JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法的相關(guān)資料,layer是layui的一個(gè)彈出層組件,但是可以作為獨(dú)立組件使用,需要的朋友可以參考下

前言

在前端頁面中，用 layer 打開窗口供用戶輸入或選擇是非常常見的用法，但是有時(shí)為了完成一次操作，需要彈出多個(gè)窗口進(jìn)行選擇、輸入或者提示，因此在關(guān)閉窗口的時(shí)候需要實(shí)現(xiàn)指定關(guān)閉任意窗口，而不能關(guān)閉錯(cuò)了或者亂了

這篇文章介紹了 layer 如何在多個(gè)窗口中關(guān)閉指定的窗口以及如何一次關(guān)閉所有窗口

一、關(guān)閉指定窗口

1.關(guān)閉指定窗口：layer.close(index)——推薦用法

在用 layer.open()等方法打開一個(gè)窗口，都會(huì)有一個(gè)返回值 index ，這時(shí)我們只需要記錄下來每個(gè)窗口對(duì)應(yīng)的返回值 index ，用layer.close(index)即可關(guān)閉指定的窗口

var index1 = layer.open();
var index2 = layer.alert();
var index3 = layer.load();
var index4 = layer.tips();
layer.close(index1);//關(guān)閉第1個(gè)窗口
layer.close(index3);//關(guān)閉第3個(gè)窗口

2.關(guān)閉最新彈出的窗口：layer.close(layer.index)

我們也可以選擇不記錄每次彈出的窗口的 index 值，而用 layer.index 去獲取最新打開的窗口的 index ，每次將最新打開的窗口關(guān)閉

這種方法的優(yōu)點(diǎn)在于比較簡單，因?yàn)槲覀冴P(guān)閉的往往都是最新彈出的，缺點(diǎn)在于沒辦法關(guān)閉指定窗口，只能關(guān)閉最新的

layer.open();
layer.alert();
layer.load();
layer.tips();
layer.close(layer.index);//關(guān)閉最新彈出的窗口

3.iframe關(guān)閉自身：parent.layer.close(index)

和關(guān)閉指定窗口的邏輯一樣，都是先獲取需要關(guān)閉的窗口的 index 值，再調(diào)用 parent.layer.close(index) 實(shí)現(xiàn)關(guān)閉指定窗口

var index = parent.layer.getFrameIndex(window.name); //先得到當(dāng)前iframe層的索引
parent.layer.close(index); //再執(zhí)行關(guān)閉

二、關(guān)閉所有窗口：layer.closeAll()

layer.closeAll(); //瘋狂模式，關(guān)閉所有層
layer.closeAll('dialog'); //關(guān)閉信息框
layer.closeAll('page'); //關(guān)閉所有頁面層
layer.closeAll('iframe'); //關(guān)閉所有的iframe層
layer.closeAll('loading'); //關(guān)閉加載層
layer.closeAll('tips'); //關(guān)閉所有的tips層

三、關(guān)閉窗口后自動(dòng)刷新頁面： window.parent.location.reload();

比如在添加用戶信息的時(shí)候，添加完成之后一般需要自動(dòng)刷新界面，顯示最新的用戶列表信息

success: function(data){
    var res = eval('(' + data + ')');
    if(res.status == '1'){
        layer.msg("添加成功！");
        layer.alert("添加成功！",function(){
            window.parent.location.reload();//刷新父頁面
            parent.layer.close(index);//關(guān)閉彈出層
        });
    } else{
        layer.msg("添加失敗！");
    }
}

頁面刷新和重新加載可以參考：JS實(shí)現(xiàn)頁面刷新和重新加載功能（關(guān)閉當(dāng)前窗口）

本文部分內(nèi)容參考自：layer彈出層的關(guān)閉問題——在執(zhí)行完畢后關(guān)閉當(dāng)前彈出層

總結(jié)

到此這篇關(guān)于JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法的文章就介紹到這了,更多相關(guān)JS layer關(guān)閉指定彈出窗口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: