layer 弹窗使用说明

1、参考

layer.msg参数含义及参数icon数字参数说明

2、代码

 <!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>layer</title>
</head>
<body>
<div style="margin-left: 50px;">
    <input type="button" value="layerOpen" onclick="layerOpen()"> <br>
    <input type="button" value="showConfirm" onclick="showConfirm()"> <br>
    <input type="button" value="showOk" onclick="showOk()"> <br>
    <input type="button" value="showError" onclick="showError()"> <br>
</div>
</body>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script th:inline="javascript"> let ctx = [[@{/}]]; </script>
<script type="text/javascript">
    $(function () {
 
    });
 
    function showOk() {
        layer.msg("<span style='color: #000'>成功</span>", {icon: 1, time: 2000});
    }
 
    function showError() {
        layer.msg("<span style='color: #000'>失败</span>", {icon: 2, time: 2000});
    }
 
    function showConfirm() {
        layer.confirm('是否执行动作？', {
            icon: 3,
            title: '执行动作',
            btn: ['确定', '取消'], //按钮
            anim: 2,
            offset: '100px'
        }, function () {
            layer.msg("<span style='color: #000'>执行成功</span>", {icon: 1, time: 1500});
            // $.ajax({
            //     url: "/tcc/manage/strategySet/drawOrderDelete", type: "post",
            //     dataType: "json", data: {id: $(".id").text()},
            //     success: function (obj) {
            //         console.log("drawOrderDelete", obj);
            //         if (obj.code == 0) {
            //             parent.layer.msg("<span style='color: #000'>删除成功</span>", {icon: 1, time: 1500});
            //         } else {
            //             parent.layer.msg("<span style='color: #000'>删除失败</span>", {icon: 2, time: 1500});
            //         }
            //         parent.layer.close(index); //再执行关闭
            //     }
            // })
 
        });
    }
 
    function layerOpen() {
        let width = 800;
        let height = ($(window).height() - 20);
        layer.open({
            content: ctx + "/demo/openWindow",
            type: 2,
            area: [width + 'px', height + 'px'],
            fix: false,
            maxmin: true,
            shade: 0.3,
            title: "layerOpen",
            btn: ['确定', '清空', '删除', '关闭'],
            shadeClose: true,// 弹层外区域关闭
            yes: function (index, layero) {
                // let iframeWin = layero.find('iframe')[0];
                // iframeWin.contentWindow.drawOrderSubmit(index, layero);
                // return false;
            }, btn2: function (index, layero) {
                // let iframeWin = layero.find('iframe')[0];
                // iframeWin.contentWindow.drawOrderClean(index, layero);
                // return false;
            }, btn3: function (index, layero) {
                // let iframeWin = layero.find('iframe')[0];
                // iframeWin.contentWindow.drawOrderDelete(index, layero);
                // return false;
            },
            cancel: function (index) {
                return true;
            }
        });
    }
</script>
</html>

posted @ 2022-06-07 16:51 一只桔子2233 阅读(334) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· laydate 根据选择渲染日期控件及"日期格式不合法"

· SpringBoot 相关小工具

· layer弹出框基本使用

· Layer弹出层组件

· 打工笔记-------------layui弹出窗使用

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

历史上的今天：
2019-06-07 Ajax 调用案例及错误捕捉

公告

昵称：一只桔子2233
园龄： 8年2个月
粉丝： 16
关注： 18

+加关注

2025年3月

日

一

二

三

四

五

六

Kikyo

纸上得来终觉浅，绝知此事要躬行。

layer 弹窗使用说明

1、参考

layer.msg参数含义及参数icon数字参数说明

2、代码

公告

搜索

我的标签

随笔分类

随笔档案

阅读排行榜

最新评论

	<!DOCTYPE html>
	<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
	<meta charset="UTF-8">
	<title>layer</title>
	</head>
	<body>
	<div style="margin-left: 50px;">
	<input type="button" value="layerOpen" onclick="layerOpen()"> <br>
	<input type="button" value="showConfirm" onclick="showConfirm()"> <br>
	<input type="button" value="showOk" onclick="showOk()"> <br>
	<input type="button" value="showError" onclick="showError()"> <br>
	</div>
	</body>
	<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/plugins/layer/layer.min.js}"></script>
	<script th:inline="javascript"> let ctx = [[@{/}]]; </script>
	<script type="text/javascript">
	$(function () {

	});

	function showOk() {
	layer.msg("<span style='color: #000'>成功</span>", {icon: 1, time: 2000});
	}

	function showError() {
	layer.msg("<span style='color: #000'>失败</span>", {icon: 2, time: 2000});
	}

	function showConfirm() {
	layer.confirm('是否执行动作？', {
	icon: 3,
	title: '执行动作',
	btn: ['确定', '取消'], //按钮
	anim: 2,
	offset: '100px'
	}, function () {
	layer.msg("<span style='color: #000'>执行成功</span>", {icon: 1, time: 1500});
	// $.ajax({
	// url: "/tcc/manage/strategySet/drawOrderDelete", type: "post",
	// dataType: "json", data: {id: $(".id").text()},
	// success: function (obj) {
	// console.log("drawOrderDelete", obj);
	// if (obj.code == 0) {
	// parent.layer.msg("<span style='color: #000'>删除成功</span>", {icon: 1, time: 1500});
	// } else {
	// parent.layer.msg("<span style='color: #000'>删除失败</span>", {icon: 2, time: 1500});
	// }
	// parent.layer.close(index); //再执行关闭
	// }
	// })

	});
	}

	function layerOpen() {
	let width = 800;
	let height = ($(window).height() - 20);
	layer.open({
	content: ctx + "/demo/openWindow",
	type: 2,
	area: [width + 'px', height + 'px'],
	fix: false,
	maxmin: true,
	shade: 0.3,
	title: "layerOpen",
	btn: ['确定', '清空', '删除', '关闭'],
	shadeClose: true,// 弹层外区域关闭
	yes: function (index, layero) {
	// let iframeWin = layero.find('iframe')[0];
	// iframeWin.contentWindow.drawOrderSubmit(index, layero);
	// return false;
	}, btn2: function (index, layero) {
	// let iframeWin = layero.find('iframe')[0];
	// iframeWin.contentWindow.drawOrderClean(index, layero);
	// return false;
	}, btn3: function (index, layero) {
	// let iframeWin = layero.find('iframe')[0];
	// iframeWin.contentWindow.drawOrderDelete(index, layero);
	// return false;
	},
	cancel: function (index) {
	return true;
	}
	});
	}
	</script>
	</html>