1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="layui-v2.4.3/layui-v2.4.3/layui/css/layui.css">
7 <script type="text/javascript" src="layui-v2.4.3/layui-v2.4.3/layui/layui.js"></script>
8 </head>
9 <body>
10 <button class="layui-btn" id="btn1">点击按钮弹窗</button>
11 <button class="layui-btn" id="btn2">alert弹窗</button>
12 <button class="layui-btn" id="btn3">confirm弹窗</button>
13 <button class="layui-btn" id="btn4">open-type=0[默认]</button>
14 <button class="layui-btn" id="btn5">open-type=1[页面层]</button>
15 <button class="layui-btn" id="btn6">open-type=2[iframe层]</button>
16 <button class="layui-btn" id="btn7">open-type=4[tips层]</button>
17 <button class="layui-btn" id="btn8">[tips层]</button>
18 </body>
19 <div id="content" style="background-color: #00bfbf;height: 100%;width: 100%;display: none">type=2的open弹出层</div>
20 <script>
21 layui.use(['layer','jquery'],function () {
22 // 定义使用jquery和layer
23 var $ = layui.jquery;
24 var layer = layui.layer;
25 // 弹窗
26 $("#btn1").click(function () {
27 layer.msg("弹出层",{icon:1});
28 })
29 $("#btn2").click(function () {
30 // 普通弹出层
31 // layer.alert("alert 弹出层");
32 // 弹出带图标的
33 layer.alert("带图标的alert弹出层",{icon:4});
34 })
35 $("#btn3").click(function () {
36 layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
37 // 这里可以写点击确定以后的回调方法比如:
38 // alert("这是点击确定以后的回调方法" );
39 // 或者直接跟layui的弹窗
40 layer.msg("这是点击确定以后的回调方法",{icon:1});
41 layer.close(index);//关闭弹窗
42 });
43 })
44 // open核心方法弹出层
45 // type 类型为0
46 $("#btn4").click(function () {
47 layer.open({
48 type:0,
49 // content:"默认弹出信息框[type=0]"
50 // 除了默认文字提示以外还可以跟html代码如:
51 content:"<p style='color: red'>默认弹出层样式</p>",
52 // 还可以添加图标属性
53 icon:1,
54 // title为标题属性
55 title:"标题属性",
56 // skin为弹出层的样式皮肤如:
57 skin:"layui-layer-lan",
58 // area为弹出层的宽高属性
59 area:['300px','200px'],
60 // 设置坐标用offset属性['top','left'] auto 为默认垂直水平居中 r为靠右 l为靠左 t靠顶部 b靠下(规则为:先左右后上下)
61 offset:['200px','100px'],
62 // offset:'rt',
63 // 关闭按钮样式
64 closeBtn:1,//0为不显示,1默认,2带有样式
65 // shade为弹出层的遮罩属性shade['透明度','颜色']
66 shade:['0.1','black'],
67 // 点击遮罩层关闭弹出层属性true为是false为否
68 shadeClose:true,
69 // time为延时关闭0为不关闭,后面可以跟毫秒数
70 time:'2000',
71 // anim为动画属性后面跟属性1,2,3,4
72 // anim: 0 平滑放大。默认
73 // anim: 1 从上掉落
74 // anim: 2 从最底部往上滑入
75 // anim: 3 从左滑入
76 // anim: 4 从左翻滚
77 // anim: 5 渐显
78 // anim: 6 抖动
79 anim:'6',
80 // 显示窗口最大化最小化;其对应的弹出层type值为1,2有效
81 // maxmin:true,
82 })
83 })
84 // type类型为1
85 $("#btn5").click(function () {
86 layer.open({
87 type:1,
88 // type为1可以使用选择器必须将内容层写到body外面;type为0只能使用字符安拼接的标签如:
89 content:$("#content"),
90 area:["300px","300px"],
91 maxmin:true,
92 // time:2000,
93 // 按钮btn属性作为弹出层的按钮;从而去触发另一个事件
94 btn:['确定','重置','取消'],
95 // 按钮居中用btnalign其值为c(居中),l(居左),r(居右)
96 // btnAlign:'c',
97 // 为按钮绑定事件
98 // 按钮一绑定事件方法如下:
99 yes: function(index, layero){
100 layer.msg("按钮确定的回调");
101 },
102 // 按扭二的回调
103 // 按钮三和按钮二用同样的方法,绑定事件以此类推
104 btn2: function(index, layero){
105 layer.msg("按钮重置的回调方法")
106 },
107 btn3: function(index, layero){
108 layer.msg("按钮取消的回调方法")
109 // 当return false 时点击按钮就不会关闭弹出层
110 return false
111 },
112 // 右上角x按钮关闭的回调
113 cancel: function(){
114 //右上角关闭回调
115 layer.msg("右上角关闭按钮的回调")
116 //return false// 开启该代码可禁止点击该按钮关闭
117 }
118 })
119 })
120 // type为2的open核心弹出层(iframe弹出层)
121 $("#btn6").click(function () {
122 layer.open({
123 // 当type为2的时候content必须为url
124 type:2,
125 // content:'layer.tanchuang.html',
126 // content除了内部链接以外也可以使用外部链接如:
127 content:"http://www.baidu.com",
128 // 如果想去除滚动条可以使用这种样式
129 // content:["http://www.baidu.com",'no'],
130 area:['1200px','500px'],
131 })
132 })
133 // type为3的open核心弹出层
134 // tips类型为吸附层多用于教学提示
135 $("#btn7").click(function () {
136 layer.open({
137 type:4,
138 content:["这是type=4的tips弹出层样式","#btn7"],
139 shadeClose:true,
140 // tips是属性为吸附层内容显示在元素的位置;如tips:1在元素下面
141 tips:1,
142 })
143 })
144 // 以下也是一种吸附层的弹出
145 $("#btn8").click(function(){
146 layer.tips('只想提示地精准些', '#btn8');
147 })
148 });
149 </script>
150 </html>
