layui的弹框弹框不自动关闭

最新推荐文章于 2025-04-09 09:27:00 发布

浩星

最新推荐文章于 2025-04-09 09:27:00 发布

阅读量3.3k

点赞数 2

分类专栏： jquery 文章标签： layui

本文链接：https://blog.youkuaiyun.com/qq_41619796/article/details/119650769

版权

jquery 专栏收录该内容

16 篇文章

订阅专栏

这篇博客探讨了layui弹框与vue弹框的使用差异，并详细展示了如何在layui中实现一级弹框点击关闭按钮后不关闭，而是弹出二级弹框的功能。主要涉及layui的layer.open方法配置，包括设置回调函数以控制弹框行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

layui的弹框相比较vue的来说，用法是有很多不一样的

官方：layui弹框 layui弹框2

实现效果：

一级弹框点击X 后，不关闭一级弹框，弹出二级弹框

实现代码：

核心不退出代码，函数里面加了：return false

1级弹框方法

layer.open({
			// layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
			type : 1,
			shift : 2,
			id : Math.random(),
			title : "日志栏",
			skin : 'layui-layer-rim',
			offset : offset,
			area: ['90%', mobileHeight], // 宽高
			btnAlign: 'c',
			content : $("#dailyForm"),

			btn1: function(index, layero){
				// layero.find('.sub-bindbtn').click();
			},
			btn2: function(index, layero){
				layer.close(index);

			},
			success : function() {
				$("#dailyForm").attr("data-type",dailyType);
				$("#dailyForm").attr("data-id",projectId);
				dailyFormAssignment(result)
			},
			cancel : function() {
				// $('#formBtn').click();
				twoTrueModel()
                return false
			}
		});

let twoTrueModel = function(){
        layer.open({
            // layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            type : 1,
            shift : 2,
            id : Math.random()*100000,
            title : "提示",
            skin : 'layui-layer-rim',
            offset : offset,
            area: ['30%', '15%'], // 宽高
            btnAlign: 'c',
            content: '<div style="text-align: center;padding-top: 16px; font-size: 16px;">是否保存并提交当前日报内容</div>',
            btn: ['保存', '关闭所有弹框'],
            shade: 0, //不显示遮罩

            btn1: function(index, layero){
                $('#formBtn').click();
            },
            btn2: function(index, layero){
                layer.closeAll();

            }
        });
	}