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

Franson發表於2018-06-13
元件巢狀

頁面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
})

 

相關文章