09-弹出层-CSDN博客

本文链接：https://blog.csdn.net/zh_cn1/article/details/118660102

layui弹出层依靠layer模块

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>弹出层</title>
	<link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css">
	<script src="layui-v2.6.8/layui/layui.js" type="text/javascript"></script>
</head>
<body>
   		<span>内容1</span>
   		<span>内容2</span>
   		<span>内容3</span>
   		<span id="sp">内容4</span>






	<script type="text/javascript">
	//加载模块
	layui.use("layer",function(){
		var layer = layui.layer;
		//简单使用
		//layer.msg("Hello")

		//信息框
		/*
		layer.open({
			type: 0, //0：信息框 1：页面层 2：iframe层 3：加载层 4:tips层
			//title: "系统消息", //参数可以是文本，也可以是false，表示不显示标题
			title: ['系统消息','color: red'],
			content: "hello"  //content可以传入任意的文本或html

		}); */

		//页面层
		/*
		layer.open({
			type: 1,
			title: "系统消息",
			content: "<div style='height:100px;width:200px'>Hello</div>",

		});*/

		//iframe
		/*
		layer.open({
			type: 2,
			title: "系统消息",
			content: ["https://www.baidu.com",'no'],
			area: ['800px','400px'],
		});*/

        //tips层
        /*
		layer.open({
			type: 4,
			content: ['内容','#sp'] //数组第二项即吸附元素选择器或者DOM

		});*/

		//eg1
		//layer.alert('酷毙了',{icon: 1}); //icon可以为1-6
		//eg2
		//layer.msg('不开心。。',{icon: 5});
		//eg3
		//layer.load(3); //风格1的加载

		//layer.alert("很高兴见到你",{icon: 6});
		/*
		layer.msg('你愿意和我做朋友嘛？',{

			time: 0, //不自动关闭
			btn: ['当然愿意','狠心拒绝'], //按钮
			yes: function(index){
				layer.close(index); //关闭当前弹出层
				layer.msg('新朋友，你好！',{
					icon: 6,//图标
					btn: ['开心','快乐']
				});
			}
		}); */

		layer.msg('玩命加载中....',function(){
			layer.msg('sdfasdfas');
		});
		


	});	
	</script>
</body>
</html>