layui弹出层使用方法总结

全栈程序员站长

发布于 2022-08-23 12:27:09

1.1K0

发布于 2022-08-23 12:27:09

大家好，又见面了，我是你们的朋友全栈君。

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月5，如有侵权请联系 cloudcommunity@tencent.com 删除

html