1. 程式人生 > >關於layer.open彈出層單擊事件如何呼叫父視窗方法的說明

關於layer.open彈出層單擊事件如何呼叫父視窗方法的說明

首先,關於layer彈出層的簡介這裡不做贅述,這裡簡單介紹下關於layer.open({ })彈出層中通過單擊事件,來呼叫父視窗方法的實現方式:

單刀直入,JS的實現方式可以如下(以單擊“修改密碼”按鈕來彈出layer.open()進行修改密碼為例):

//修改密碼
    $("#ChangePWD").on('click', function () {
        layer.open({
            type: 2
            , title: '修改密碼'
            , area: ['390px', '250px']
            , skin: 'layer-ext-seaning'
            , shade: 0.5
            , maxmin: false
            , content: '/Home/ChangePWD'
            , btn: ['提交', '取消']
            , yes: function (layero, index) {
                var newpsw = window[index.find('iframe')[0]['name']];
               newpsw.submit();
            }
            , btn2: function () {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }
        })
    })

簡單介紹:

content: '/Home/ChangePWD' :指專案路徑下的Home目錄中的ChangePWD修改密碼頁面;

btn: ['提交', '取消'] :彈出層中要顯示的按鈕;

yes: function (layero, index) { }:單擊確定按鈕(預設為第一個)觸發的事件,layero為當前層索引,index為當前層DOM物件;

btn2: function () { }:對應“取消”按鈕要觸發的事件。

實現的重點是yes: function (layero, index) { } 這裡,如果彈出層的content裡帶的是一個獨立的頁面,

則在瀏覽器中解析出來的是這個頁面包括在<Ifram></ifram>標籤之中,

所以 var newpsw = window[index.find('iframe')[0]['name']]; 這句話一般情況下幾乎是可以照搬的,這裡我們就把父視窗中的所

有元素賦給了一個物件變數newpsw,而sumit()方法就是父視窗中定義的提交事件,大致如下:

於是,我們就用newpsw.sumit()呼叫了它。

PS:有些人需要在彈出層中加入2個以上的按鈕事件,那麼參照貝btn2的事件定義,我們應該能夠得到啟發。

PS:之所以在這裡敘述以上內容,是因為度娘裡很難找到關於layer.open()呼叫父視窗事件的有效介紹,包括在layer的官網上也都比較費勁,

很難滿足在網上快速有效的查閱此類

資料的需求,特此記之。

以上。