layer打开弹窗时传递参数

最新推荐文章于 2023-12-05 16:31:51 发布

原创最新推荐文章于 2023-12-05 16:31:51 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html

前端笔记专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何使用layui的layer组件实现父页面与子页面的数据交互，特别是在弹窗加载子页面后，如何在成功回调函数中设置子页面的HTML内容或input文本框的value参数。

父页面中

layer.open({
    type: 2,
    title: '预览',
    shadeClose: true,
    shade: 0.8,
    area: ['380px', '90%'],
    content: '/cms/admin/preview',//iframe的url
    success:function (dom) {
        let $iframeDom=$(dom[0]).find("iframe").eq(0).contents();
        $iframeDom.find(".content").html('内容或者html')  
    }
});

下面为layuimini里面的写法（其实都是一样的原理）写成如下：

var index = layer.open({
    title: '编辑用户',
    type: 2,
    shade: 0.2,
    maxmin: true,
    shadeClose: true,
    area: ['100%', '100%'],
    content: '../page/table/edit.html',
    success: function(layero, index) {
        var body = layer.getChildFrame('body', index);
        body.find('input[name = "username"]').val(data.username)
        body.find('input[value = "' + data.sex + '"]').prop("checked", true);
    }
});

在子页面中写个隐藏的元素就可以了，但是这是错误的, 因为 success是在页面加载结束后运行包括js代码

所以直接在 seccess回调函数中直接设置子页面的html input文本框里面的value参数即可。