js layui 彈出子窗體_Layui彈出層 加載 做編輯頁面的方法

layui是一款優秀的子產品化前端架構。利用layui彈出層做編輯頁面

先上效果圖

基本準備，引入layui的layui.css,layui.js檔案

Js方法

function openDetial(title, area, path, sucFunName, callBack) {

layer.open({

type: 2,

title: title, //不顯示标題欄

closeBtn: 2,

area: area,

shade: 0.8,

id: (new Date()).valueOf(), //設定一個id，防止重複彈出 時間戳1280977330748

btn: ['儲存', '取消'],

btnAlign: 'r',

moveType: 1, //拖拽模式，0或者1

content: path,

yes: function (index, layero) {

var btn = layero.find('.layui-layer-btn').find('.layui-layer-btn0');

alert("-----");

try {

var _ifr = btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].contentWindow ||

btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].children[0].contentWindow;

var func = new Function('_ifr', "return _ifr." + sucFunName + "();");

var flg = func(_ifr);

if (flg == false) {

return false;

} else {

if (callBack != null) callBack();

window.location.reload();

}

} catch (ex) {

}

},

btn2: function (index, layero) {

}

});

}

以下是測試頁面 測試頁面中具備儲存方法ApplicationSave()

調用 如下參數中的ApplicationSave和編輯頁面的方法名一緻

openDetial("清單維護", ['600px', '550px'], "./editor.html", "ApplicationSave", function() {alert("執行完了");});

有興趣的小夥伴，可以試試

以上這篇Layui彈出層 加載 做編輯頁面的方法就是小編分享給大家的全部内容了，希望能給大家一個參考，也希望大家多多支援腳本之家。