大家好,又见面了,我是你们的朋友全栈君。
layui的模态窗口很强大,但是使用的时候要声明很多东西,并且对于窗口之间的参数传递也没有做具体的说明,所以基于layui弹出层的api进行了一些简单的封装,使用起来更加顺手,先上代码
function OpenDialog(id,title, url, width, height,callback,params) {
layui.use('layer', function () {
var $ = layui.jquery, layer = top.layui.layer;
width = width + "%"
height = height + "%";
layer.open({
type: 2,
title: title,
area: [width, height],
shade: 0,
maxmin: false,
content: GetRootPath() + url,
zIndex: layer.zIndex,
success: function (layero, index) {
if (params) {
var iframe = document.getElementById("layui-layer-iframe" + index).contentWindow
iframe["layer_params"] = params;
}
},
end: function () {
if (callback) {
var layer_return = window["layer_return"];
if (layer_return) {
callback(layer_return);
} else {
callback();
}
}
}
});
})
}
function CloseDialog(ReturnValue) {
layui.use('layer', function () {
if (ReturnValue) {
top.window["layer_return"] = ReturnValue;
}
var $ = layui.jquery, layer = layui.layer;
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
})
}
function GetParam() {
if (window.layer_params) {
return window.layer_params;
}
}
一共封装了三个方法,打开,关闭,获取传递参数
OpenDialog方法保留了一些常用参数,如标题,打开iframe页面的地址,宽,高,增加了关闭页面的回掉函数与页面之间的传递参数,打开方法通过获取顶层的layer对象,使得打开的窗口全部是基于顶层页面,解决了在iframe中打开页面只能在iframe中显示与移动,宽高都是基于百分比打开,适应性更加灵活一些,向打开的子级页面传递参数是通过向iframe增加变量存储的方式实现的,比较灵活,子级页面关闭后也随之销毁,子级页面关闭后父级页面的回调函数通过api中的end方法嵌套一下,如果子级页面关闭时想要向父级页面传递数据(如表单打开选择树页面回传选项值)时,就会存储在顶级页面的layer_return变量中,因为所有页面都是声明在顶级窗口页面中的,所以不存在什么层级关系的复杂处理,最后附上使用范例
function Edit(data) {
OpenDialog("configadd", "编辑", "Frame/Config/Edit?RowGuid=" + data.RowGuid, "80", "90", BindData, "1111");
}
function BindData(ReturnValue) {
console.log(ReturnValue)
BindTable(tabaleid, '/Frame/Config/FindList/', AfterBind);
}
$(function () {
var params = GetParam();
if (params) {
console.log(params)
}
});
function Close() {
CloseDialog();
}
function Close() {
CloseDialog("123");
}
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/137961.html原文链接:https://javaforall.cn