layui弹出层使用方法总结

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");
    }

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值