JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法總結(jié)
前言
在前端頁面中,用 layer 打開窗口供用戶輸入或選擇是非常常見的用法,但是有時為了完成一次操作,需要彈出多個窗口進(jìn)行選擇、輸入或者提示,因此在關(guān)閉窗口的時候需要實現(xiàn)指定關(guān)閉任意窗口,而不能關(guān)閉錯了或者亂了
這篇文章介紹了 layer 如何在多個窗口中關(guān)閉指定的窗口以及如何一次關(guān)閉所有窗口
一、關(guān)閉指定窗口
1.關(guān)閉指定窗口:layer.close(index)——推薦用法
在用 layer.open()等方法打開一個窗口,都會有一個返回值 index ,這時我們只需要記錄下來每個窗口對應(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個窗口 layer.close(index3);//關(guān)閉第3個窗口
2.關(guān)閉最新彈出的窗口:layer.close(layer.index)
我們也可以選擇不記錄每次彈出的窗口的 index 值,而用 layer.index 去獲取最新打開的窗口的 index ,每次將最新打開的窗口關(guān)閉
這種方法的優(yōu)點在于比較簡單,因為我們關(guā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) 實現(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)閉窗口后自動刷新頁面: 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);//關(guān)閉彈出層 }); } else{ layer.msg("添加失?。?); } }
頁面刷新和重新加載可以參考:JS實現(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript學(xué)習(xí)筆記(七)利用javascript來創(chuàng)建和存儲cookie
今天把javascript如何用來創(chuàng)建及存儲cookie復(fù)習(xí)了一下,其中的一點體會拿出來和大家討論,懇請高手指點一二。2011-04-04讓回調(diào)函數(shù) showResponse 也帶上參數(shù)的代碼
讓回調(diào)函數(shù) showResponse 也帶上參數(shù)的代碼...2007-08-08layui表單驗證select下拉框?qū)崿F(xiàn)驗證的方法
今天小編就為大家分享一篇layui表單驗證select下拉框?qū)崿F(xiàn)驗證的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09Javascript實現(xiàn)視頻輪播在pc端與移動端均可
用Javascript實現(xiàn)視頻輪播,畢竟是客戶的需求嗎?所以盡量實現(xiàn)下,下面有個實現(xiàn)視頻輪播的示例,pc端與移動端均可以實現(xiàn),感興趣的朋友可以了解下2013-09-09JS實現(xiàn)簡單的選擇題測評系統(tǒng)代碼思路詳解(demo)
本文給大家分享js實現(xiàn)簡單的選擇題測評系統(tǒng)實例代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-09-09javascript瀏覽器用戶代理檢測腳本實現(xiàn)方法
下面小編就為大家?guī)硪黄猨avascript瀏覽器用戶代理檢測腳本實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10