在使用layui弹窗类型是页面弹窗时,在弹窗内部想调用外部的方法进行关闭本身比较麻烦(因为使用了iframe不在一个window中)。我们可以把关闭弹窗的操作传递到弹窗内。
建立一个弹窗dialog,弹窗内容是另一个add页面:
var dialog = layer.open({
type: 2,
title: "添加",
closeBtn: 1,
id: "detail",
area: ["100%", "100%"],
content: "add.html?id=" + data.id,
zIndex: layer.zIndex,
success: function (layero, index) {
window[layero.find("iframe")[0]["name"]].back = function (cb) {
cb && cb();
initTable();
layui.close()
};
},
});
弹窗创建完成之后找到对应的iframe name然后取到对应的window
在弹窗内部iframe的window中的作用域里添加关闭弹窗的函数(在获取到的window可以添加任何东西,相当于与父window建立了通信):
window[layero.find("iframe")[0]["name"]].back = function (cb) {
cb && cb();//回调
initTable();//是一个刷新列表的函数
layui.close()
};
然后在弹窗里提交请求完成后就可以执行当前window的back方法返回列表页面了:
function submitAdd(status) {
request({
url: "/add",
isJson: true,
data: JSON.stringify({
id: 1,
status: 2,
desc: 3,
}),
method: "post",
success: function (res) {
if (res.code == 0) {
layer.msg(res.description);
setTimeout(function () {
window.back();
}, 1000);
// 返回列表页
}
},
error: function (msg) {
layer.msg("后台错误");
},
});
}