1. 程式人生 > 實用技巧 >利用Layer元件彈出多個對話方塊(非巢狀)與關閉及重新整理

利用Layer元件彈出多個對話方塊(非巢狀)與關閉及重新整理

頁面A中彈出頁面B,在頁面B中彈出頁面C,在layer做巢狀ifframe彈出時會遇到C頁面被巢狀在B頁面中,如果C尺寸大於B,則C將不能顯示完整。這個時候可以考慮B,C頁面均由A頁面彈出從而避免巢狀帶來的問題。廢話少說,直接上程式碼。

1.A彈出B:

在A.html中插入一下程式碼

layer.open({
                  title:'新增賬號',
                  type: 2,
                  area: ['700px', '350px'],
                  fixed: false, //不固定
                  maxmin: false
, content:['B.html?'+param,'no'] });

2.B彈出C:

在B.html中插入以下程式碼

parent.layer.open({
        type: 2,
        skin: 'layui-layer-molv',
        title: "組織機構選擇",
        area: ['460px', '600px'],
        shadeClose: false,
        content: ['C.html','no'],
        btn: ['確定','關閉'],
        btn1: 
function (index) { var subIframe=parent.$("iframe"); if(subIframe!=null&&subIframe.length==2){ var orgs= subIframe[1].contentWindow.getCMethod(); if(orgs&&orgs.length>0){ $("input[name='defaultOrgId']").val(orgs[0].orgId); $(
"input[name='orgName']").val(orgs[0].orgName); } } parent.layer.close(index);//關閉彈出層C.html } });

3.關閉iframe彈出層js程式碼

(1)關閉特定iframe

//當在iframe頁面關閉自身時,在iframe頁執行以下js指令碼
var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
parent.layer.close(index); //再執行關閉

(2)關閉所有彈出層

layer.closeAll(); //瘋狂模式,關閉所有層
layer.closeAll('dialog'); //關閉資訊框
layer.closeAll('page'); //關閉所有頁面層
layer.closeAll('iframe'); //關閉所有的iframe層
layer.closeAll('loading'); //關閉載入層
layer.closeAll('tips'); //關閉所有的tips層

4.重新整理另一個彈出層

(1)重新整理已知index的iframe彈層

layer.iframeSrc(index, 'http://sentsin.com') //官方示例,其中引數index為iframe索引,第二個引數為iframe的URL

(2)重新整理未知index的iframe彈層

parent.$("iframe").each(function () {
                               $(this).attr('src', $(this).attr('src'));//需要引用jquery
})