layui嵌套弹出层

最新推荐文章于 2025-09-11 02:21:55 发布

原创最新推荐文章于 2025-09-11 02:21:55 发布 · 5k 阅读

2 ·

CC 4.0 BY-SA版权

前端框架、插件专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了 layui 框架如何实现嵌套的弹出层功能，通过实例代码展示了如何在一个弹窗中打开另一个弹窗，以及在子弹窗中进行操作后关闭和更新父弹窗内容的方法。

<button data-method="setTop" data-type="auto" class="layui-btn layui-btn-normal proMent">属性管理</button> 被点击的按钮

var active = {
    setTop: function(){
        var that = this;
        //多窗口模式，层叠置顶
        layer.open({
            type: 1, //此处以iframe举例
            title: '管理属性',
            area: ['400px', '260px'],
            shade: 0,
            offset: [ //为了演示，随机坐标
                $(window).height()-$(window).height()/2-400,
                $(window).width()-$(window).width()/2-200
            ] ,
            content: $("#firstLayer").html(),
            btn: ['新增属性', '确定'], //只是为了演示
            yes: function(){
                //弹出新增属性弹框开始
                parent.layer.open({
                    title: '新增属性',
                    shade: 0,
                    area: ['400px', '200px'],
                    offset: [ //为了演示，随机坐标
                        $(window).height()-$(window).height()/2-120,
                        $(window).width()-$(window).width()/2-200
                    ] ,
                    btn: ['取消', '确定'], //只是为了演示
                    content: $("#firstLayer1").html()
                });
             //   弹出新增属性弹框结束
             },
            btn2: function(){
                    layer.closeAll();
            },
            zIndex: layer.zIndex, //重点1
            success: function(layero){
                layer.setTop(layero); //重点2
            }
        });
    }
};
$('.proMent').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
});

下面为弹出的两个框

<form class="layui-form" action="" id="firstLayer">
    <div class="layui-form-item">
        <label class="layui-form-label">单行输入框</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
</form>
<form class="layui-form" action="" id="firstLayer1">
    <div class="layui-form-item">
        <label class="layui-form-label">单行输入框</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
</form>