通用弹出层组件 layer
沙发弹簧损坏可更换新的弹簧组件 #生活常识# #家庭维修技巧# #家具修缮#
弹出层组件
弹出层组件 layer 是 Layui 最古老的组件，也是使用覆盖面最广泛的代表性组件。 layer 集众多弹层功能为一体，灵活而多样，是许多开发者的网页弹出层的首选交互方案，在各类业务场景都能发挥重要作用。
示例
点击下述按钮，查看每个示例对应的弹层效果。
在线测试
在线测试
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<div class="layui-form">
12.
<div class="layui-form-item">
13.
<textarea class="layui-textarea ws-demo-editor" id="ID-demo-editor" >
14.
// 在此处输入 layer 的任意代码
15.
layer.open({
16.
type: 1, // page 层类型
17.
area: ['500px', '300px'],
18.
title: 'Hello layer',
19.
shade: 0.6, // 遮罩透明度
20.
shadeClose: true, // 点击遮罩区域，关闭弹层
21.
maxmin: true, // 允许全屏最小化
22.
anim: 0, // 0-6 的动画形式，-1 不开启
23.
content: '<div style="padding: 32px;">一个普通的页面层，传入了自定义的 HTML</div>'
24.
});</textarea>
25.
</div>
26.
<div>
27.
<button type="button" class="layui-btn" id="ID-demo-run">运行效果</button>
28.
</div>
29.
</div>
30.
<script>
31.
layui.use(function(){
32.
var $ = layui.$;
33.
var layer = layui.layer;
34.
$('#ID-demo-run').on('click', function(){
35.
var code = $('#ID-demo-editor').val();
36.
try {
37.
new Function(code)();
38.
} catch(e) {
39.
layer.alert('语句异常：'+ e.message, {icon: 2})
40.
}
41.
});
42.
});
43.
</script>
44.
45.
</body>
46.
</html>
弹层类型
弹层类型</>
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<div class="layui-btn-container">
12.
<button type="button" class="layui-btn layui-btn-primary" lay-on="alert">Alert</button>
13.
<button type="button" class="layui-btn layui-btn-primary" lay-on="confirm">Confirm</button>
14.
<button type="button" class="layui-btn layui-btn-primary" lay-on="msg">Msg</button>
15.
<button type="button" class="layui-btn layui-btn-primary" lay-on="page">Page</button>
16.
<button type="button" class="layui-btn layui-btn-primary" lay-on="iframe">Iframe</button>
17.
<button type="button" class="layui-btn layui-btn-primary" lay-on="load">Load</button>
18.
<button type="button" class="layui-btn layui-btn-primary" lay-on="tips">Tips</button>
19.
<button type="button" class="layui-btn layui-btn-primary" lay-on="prompt">Prompt</button>
20.
<button type="button" class="layui-btn layui-btn-primary" lay-on="photots">Photots</button>
21.
</div>
22.
23.
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
24.
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
25.
<script>
26.
layui.use(function(){
27.
var layer = layui.layer;
28.
var util = layui.util;
29.
// 批量事件
30.
util.on('lay-on', {
31.
alert: function(){
32.
layer.alert('对话框内容');
33.
},
34.
confirm: function(){
35.
layer.confirm('一个询问框的示例？', {
36.
btn: ['确定', '关闭'] //按钮
37.
}, function(){
38.
layer.msg('第一个回调', {icon: 1});
39.
}, function(){
40.
layer.msg('第二个回调', {
41.
time: 20000, // 20s 后自动关闭
42.
btn: ['明白了', '知道了']
43.
});
44.
});
45.
},
46.
msg: function(){
47.
layer.msg('一段提示信息');
48.
},
49.
page: function(){
50.
// 页面层
51.
layer.open({
52.
type: 1,
53.
area: ['420px', '240px'], // 宽高
54.
content: '<div style="padding: 11px;">任意 HTML 内容</div>'
55.
});
56.
},
57.
iframe: function(){
58.
// iframe 层
59.
layer.open({
60.
type: 2,
61.
title: 'iframe test',
62.
shadeClose: true,
63.
shade: 0.8,
64.
area: ['380px', '80%'],
65.
content: '/layer/test/1.html' // iframe 的 url
66.
});
67.
},
68.
load: function(){
69.
var index = layer.load(0, {shade: false});
70.
setTimeout(function(){
71.
layer.close(index); // 关闭 loading
72.
}, 5000);
73.
},
74.
tips: function(){
75.
layer.tips('一个 tips 层', this, {
76.
tips: 1
77.
});
78.
},
79.
prompt: function(){
80.
layer.prompt({title: '密令输入框', formType: 1}, function(pass, index){
81.
layer.close(index);
82.
layer.prompt({title: '文本输入框', formType: 2}, function(text, index){
83.
layer.close(index);
84.
alert('您输入的密令：'+ pass +'；文本：'+ text);
85.
});
86.
});
87.
},
88.
photots: function(){
89.
layer.photos({
90.
photos: {
91.
"title": "Photos Demo",
92.
"start": 0,
93.
"data": [
94.
{
95.
"alt": "layer",
96.
"pid": 1,
97.
"src": "https://unpkg.com/[email protected]/demo/layer.png",
98.
},
99.
{
100.
"alt": "壁纸",
101.
"pid": 3,
102.
"src": "https://unpkg.com/[email protected]/demo/000.jpg",
103.
},
104.
{
105.
"alt": "浩瀚宇宙",
106.
"pid": 5,
107.
"src": "https://unpkg.com/[email protected]/demo/outer-space.jpg",
108.
}
109.
]
110.
}
111.
});
112.
}
113.
});
114.
});
115.
</script>
116.
117.
</body>
118.
</html>
信息框
信息框即 dialog 类型层，对应默认的 type: 0，该类型的弹层同时只能存在一个。更多说明详见：#type
Preview</>
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<div class="layui-btn-container">
12.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-alert">对话框带图标</button>
13.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-confirm">询问框</button>
14.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-msg-dark">深色提示框</button>
15.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-msg-light">浅色提示框</button>
16.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-alert-btn">自定义按钮</button>
17.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-count-down">关闭倒计时</button>
18.
</div>
19.
20.
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
21.
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
22.
<script>
23.
layui.use(function(){
24.
var layer = layui.layer;
25.
var util = layui.util;
26.
// 事件
27.
util.on('lay-on', {
28.
"test-alert": function(){
29.
// 示范对话框所有内置图标
30.
var icon = 0;
31.
(function changeIcon(){
32.
layer.alert('点击确定，继续查看图标', {
33.
icon: icon,
34.
shadeClose: true,
35.
title: 'icon: '+ icon
36.
}, ++icon > 6 ? function(){
37.
layer.msg('内置图标演示完毕', {icon: 1});
38.
} : changeIcon);
39.
}());
40.
},
41.
"test-confirm": function(){
42.
layer.confirm('一个询问框的示例？', {icon: 3}, function(){
43.
layer.msg('点击确定的回调', {icon: 1});
44.
}, function(){
45.
layer.msg('点击取消的回调');
46.
});
47.
},
48.
"test-msg-dark": function(){
49.
layer.msg('深色提示框的示例');
50.
},
51.
"test-msg-light": function(){
52.
layer.msg('浅色提示框的示例', {icon: 0}, function(){
53.
// layer.msg('提示框关闭后的回调');
54.
});
55.
},
56.
"test-alert-btn": function(){
57.
layer.alert('自定义按钮', {
58.
btn: ['按钮一', '按钮二', '按钮三'],
59.
btnAlign: 'c', // 按钮居中显示
60.
btn1: function(){
61.
layer.msg('按钮一的回调');
62.
},
63.
btn2: function(){
64.
layer.msg('按钮二的回调');
65.
},
66.
btn3: function(){
67.
layer.msg('按钮三的回调');
68.
}
69.
});
70.
},
71.
"test-count-down": function(){
72.
layer.alert('在标题栏显示自动关闭倒计秒数', {
73.
time: 5*1000,
74.
success: function(layero, index){
75.
var timeNum = this.time/1000, setText = function(start){
76.
layer.title('<span class="layui-font-red">'+ (start ? timeNum : --timeNum) + '</span> 秒后自动关闭', index);
77.
};
78.
setText(!0);
79.
this.timer = setInterval(setText, 1000);
80.
if(timeNum <= 0) clearInterval(this.timer);
81.
},
82.
end: function(){
83.
clearInterval(this.timer);
84.
}
85.
});
86.
}
87.
})
88.
});
89.
</script>
90.
91.
</body>
92.
</html>
页面层
Preview</>
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<div class="layui-btn-container">
12.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page">普通页面层</button>
13.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-wrap">捕获层</button>
14.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-title">剔除默认标题栏</button>
15.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-move">绑定弹层的拖拽元素</button>
16.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-custom">
17.
<span class="layui-badge-dot"></span> 弹出任意自定义内容
18.
</button>
19.
</div>
20.
<div id="ID-test-layer-wrapper" style="display: none;">
21.
<div style="padding:16px;">
22.
弹出已经存在于页面中的一段元素<br>
23.
通常是放置在 <body> 根节点下
24.
</div>
25.
</div>
26.
27.
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
28.
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
29.
<script>
30.
layui.use(function(){
31.
var $ = layui.$;
32.
var layer = layui.layer;
33.
var util = layui.util;
34.
var form = layui.form;
35.
// 事件
36.
util.on('lay-on', {
37.
'test-page': function(){
38.
layer.open({
39.
type: 1,
40.
// area: ['420px', '240px'], // 宽高
41.
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
42.
});
43.
},
44.
'test-page-wrap': function(){
45.
layer.open({
46.
type: 1,
47.
shade: false, // 不显示遮罩
48.
content: $('#ID-test-layer-wrapper'), // 捕获的元素
49.
end: function(){
50.
// layer.msg('关闭后的回调', {icon:6});
51.
}
52.
});
53.
},
54.
'test-page-title': function(){
55.
layer.open({
56.
type: 1,
57.
area: ['420px', '240px'], // 宽高
58.
title: false, // 不显示标题栏
59.
closeBtn: 0,
60.
shadeClose: true, // 点击遮罩关闭层
61.
content: '<div style="padding: 16px;">任意 HTML 内容。可点击遮罩区域关闭。</div>'
62.
});
63.
},
64.
'test-page-move': function(){
65.
layer.open({
66.
type: 1,
67.
area: ['420px', '240px'], // 宽高
68.
title: false,
69.
content: ['<div style="padding: 11px;">',
70.
'任意 HTML 内容',
71.
'<div style="padding: 16px 0;">',
72.
'<button class="layui-btn" id="ID-test-layer-move">拖拽此处移动弹层</button>',
73.
'</div>',
74.
'</div>'].join(''),
75.
move: '#ID-test-layer-move'
76.
});
77.
},
78.
'test-page-custom': function(){
79.
layer.open({
80.
type: 1,
81.
area: '350px',
82.
resize: false,
83.
shadeClose: true,
84.
title: 'demo : layer + form',
85.
content: `
86.
<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
87.
<div class="demo-login-container">
88.
<div class="layui-form-item">
89.
<div class="layui-input-wrap">
90.
<div class="layui-input-prefix">
91.
<i class="layui-icon layui-icon-username"></i>
92.
</div>
93.
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
94.
</div>
95.
</div>
96.
<div class="layui-form-item">
97.
<div class="layui-input-wrap">
98.
<div class="layui-input-prefix">
99.
<i class="layui-icon layui-icon-password"></i>
100.
</div>
101.
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
102.
</div>
103.
</div>
104.
<div class="layui-form-item">
105.
<div class="layui-row">
106.
<div class="layui-col-xs7">
107.
<div class="layui-input-wrap">
108.
<div class="layui-input-prefix">
109.
<i class="layui-icon layui-icon-vercode"></i>
110.
</div>
111.
<input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
112.
</div>
113.
</div>
114.
<div class="layui-col-xs5">
115.
<div style="margin-left: 10px;">
116.
<img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
117.
</div>
118.
</div>
119.
</div>
120.
</div>
121.
<div class="layui-form-item">
122.
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
123.
<a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
124.
</div>
125.
<div class="layui-form-item">
126.
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
127.
</div>
128.
<div class="layui-form-item demo-login-other">
129.
<label>社交账号登录</label>
130.
<span style="padding: 0 21px 0 6px;">
131.
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
132.
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
133.
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
134.
</span>
135.
或 <a href="#reg">注册帐号</a></span>
136.
</div>
137.
</div>
138.
</div>
139.
`,
140.
success: function(){
141.
// 对弹层中的表单进行初始化渲染
142.
form.render();
143.
// 表单提交事件
144.
form.on('submit(demo-login)', function(data){
145.
var field = data.field; // 获取表单字段值
146.
// 显示填写结果，仅作演示用
147.
layer.alert(JSON.stringify(field), {
148.
title: '当前填写的字段值'
149.
});
150.
// 此处可执行 Ajax 等操作
151.
// …
152.
return false; // 阻止默认 form 跳转
153.
});
154.
}
155.
});
156.
}
157.
})
158.
});
159.
</script>
160.
161.
</body>
162.
</html>
iframe 层
Preview</>
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<div class="layui-btn-container">
12.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-handle">
13.
iframe 的父子操作
14.
<span id="ID-test-iframe-mark"></span>
15.
</button>
16.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-video">弹出多媒体</button>
17.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-overflow">禁止 iframe 滚动条</button>
18.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-curl">弹出任意 URL 页面</button>
19.
</div>
20.
21.
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
22.
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
23.
<script>
24.
layui.use(function(){
25.
var $ = layui.$;
26.
var layer = layui.layer;
27.
var util = layui.util;
28.
// 事件
29.
util.on('lay-on', {
30.
'test-iframe-handle': function(){
31.
layer.open({
32.
type: 2,
33.
area: ['680px', '520px'],
34.
content: '/layer/test/iframe.html',
35.
fixed: false, // 不固定
36.
maxmin: true,
37.
shadeClose: true,
38.
btn: ['获取表单值', '取消'],
39.
btnAlign: 'c',
40.
yes: function(index, layero){
41.
// 获取 iframe 的窗口对象
42.
var iframeWin = window[layero.find('iframe')[0]['name']];
43.
var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
44.
var value = elemMark.val();
45.
46.
if($.trim(value) === '') return elemMark.focus();
47.
// 显示获得的值
48.
layer.msg('获得 iframe 中的输入框标记值：'+ value);
49.
}
50.
});
51.
},
52.
'test-iframe-video': function(){
53.
layer.open({
54.
type: 2,
55.
title: false,
56.
area: ['630px', '360px'],
57.
shade: 0.8,
58.
closeBtn: 0,
59.
shadeClose: true,
60.
content: '//player.youku.com/embed/XMzI1NjQyMzkwNA==' // video 地址
61.
});
62.
layer.msg('点击遮罩区域可关闭');
63.
},
64.
'test-iframe-overflow': function(){
65.
layer.open({
66.
type: 2,
67.
area: ['360px', '500px'],
68.
skin: 'layui-layer-rim', // 加上边框
69.
content: ['/layer/test/1.html', 'no'] // 数组第二个成员设为 no 即屏蔽 iframe 滚动条
70.
});
71.
},
72.
'test-iframe-curl': function(){
73.
layer.open({
74.
type: 2,
75.
title: 'iframe 任意 URL',
76.
shadeClose: true,
77.
maxmin: true, //开启最大化最小化按钮
78.
area: ['900px', '600px'],
79.
content: 'https://dashi.aliyun.com/activity/aigc?userCode=ap0255is'
80.
});
81.
}
82.
})
83.
});
84.
</script>
85.
86.
</body>
87.
</html>
加载层
为了不影响继续体验，以下每个 loading 示例均会在 3 秒后自动模拟关闭
Preview</>
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<div class="layui-btn-container">
12.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-1">风格1</button>
13.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-2">风格2</button>
14.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-3">风格3</button>
15.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-4">风格4</button>
16.
</div>
17.
18.
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
19.
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
20.
<script>
21.
layui.use(function(){
22.
var layer = layui.layer;
23.
var util = layui.util;
24.
// 事件
25.
util.on('lay-on', {
26.
'test-load-1': function(){
27.
var loadIndex = layer.load(0);
28.
// 模拟关闭
29.
setTimeout(function(){
30.
layer.close(loadIndex)
31.
}, 3000);
32.
},
33.
'test-load-2': function(){
34.
var loadIndex = layer.load(1);
35.
// 模拟关闭
36.
setTimeout(function(){
37.
layer.close(loadIndex)
38.
}, 3000);
39.
},
40.
'test-load-3': function(){
41.
var loadIndex = layer.load(2);
42.
// 模拟关闭
43.
setTimeout(function(){
44.
layer.close(loadIndex)
45.
}, 3000);
46.
},
47.
'test-load-4': function(){
48.
var loadIndex = layer.msg('加载中', {
49.
icon: 16,
50.
shade: 0.01
51.
});;
52.
// 模拟关闭
53.
setTimeout(function(){
54.
layer.close(loadIndex)
55.
}, 3000);
56.
}
57.
})
58.
});
59.
</script>
60.
61.
</body>
62.
</html>
Tips 层
Preview</>
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<div class="layui-btn-container">
12.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-top">显示在上</button>
13.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-right">显示在右</button>
14.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-bottom">显示在下</button>
15.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-left">显示在左</button>
16.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-color">自定义背景色</button>
17.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-more">允许多个 tips</button>
18.
</div>
19.
20.
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
21.
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
22.
<script>
23.
layui.use(function(){
24.
var layer = layui.layer;
25.
var util = layui.util;
26.
// 事件
27.
util.on('lay-on', {
28.
'test-tips-top': function(){
29.
layer.tips('向上', this, {
30.
tips: 1
31.
});
32.
},
33.
'test-tips-right': function(){
34.
layer.tips('默认向右', this);
35.
},
36.
'test-tips-bottom': function(){
37.
layer.tips('向下', this, {
38.
tips: 3
39.
});
40.
},
41.
'test-tips-left': function(){
42.
layer.tips('向左', this, {
43.
tips: 4
44.
});
45.
},
46.
'test-tips-color': function(){
47.
layer.tips('可自定义任意主题色', this, {
48.
tips: [1, '#16b777']
49.
});
50.
},
51.
'test-tips-more': function(){
52.
layer.tips('不会关闭之前的 tips', this, {
53.
tipsMore: true
54.
});
55.
}
56.
})
57.
});
58.
</script>
59.
60.
</body>
61.
</html>
其他层
Preview</>
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<div class="layui-btn-container">
12.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-tab">tab 层</button>
13.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-0">prompt - 单行文本框层</button>
14.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-1">prompt - 密令输入框层</button>
15.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-2">prompt - 多行文本框层</button>
16.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-photos-one">photos - 单张图片层</button>
17.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-photos">photos - 多张相册层</button>
18.
</div>
19.
20.
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
21.
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
22.
<script>
23.
layui.use(function(){
24.
var layer = layui.layer;
25.
var util = layui.util;
26.
// 事件
27.
util.on('lay-on', {
28.
'test-tips-tab': function(){
29.
layer.tab({
30.
area: ['600px', '300px'],
31.
tab: [{
32.
title: 'Title 1',
33.
content: '<div style="padding: 16px;">tabs content 111</div>'
34.
}, {
35.
title: 'Title 2',
36.
content: '<div style="padding: 16px;">tabs content 222</div>'
37.
}, {
38.
title: 'Title 3',
39.
content: '<div style="padding: 16px;">tabs content 333</div>'
40.
}],
41.
shadeClose: true
42.
});
43.
},
44.
'test-tips-prompt-0': function(){
45.
layer.prompt({title: '请输入文本'}, function(value, index, elem){
46.
if(value === '') return elem.focus();
47.
layer.msg('获得：'+ util.escape(value)); // 显示 value
48.
// 关闭 prompt
49.
layer.close(index);
50.
});
51.
},
52.
'test-tips-prompt-1': function(){
53.
layer.prompt({title: '请输入密令', formType: 1}, function(value, index, elem){
54.
if(value === '') return elem.focus();
55.
layer.msg('获得：'+ util.escape(value)); // 显示 value
56.
// 关闭 prompt
57.
layer.close(index);
58.
});
59.
},
60.
'test-tips-prompt-2': function(){
61.
layer.prompt({title: '请输入文本', formType: 2}, function(value, index, elem){
62.
if(value === '') return elem.focus();
63.
layer.msg('获得：'+ util.escape(value)); // 显示 value
64.
// 关闭 prompt
65.
layer.close(index);
66.
});
67.
},
68.
'test-tips-photos-one': function(){
69.
layer.photos({
70.
photos: {
71.
"title": "Photos Demo",
72.
"start": 0,
73.
"data": [
74.
{
75.
"alt": "浩瀚宇宙",
76.
"pid": 5,
77.
"src": "https://unpkg.com/[email protected]/demo/outer-space.jpg",
78.
}
79.
]
80.
},
81.
footer: false // 是否显示底部栏 --- 2.8.16+
82.
});
83.
},
84.
'test-tips-photos': function(){
85.
layer.photos({
86.
photos: {
87.
"title": "Photos Demo",
88.
"start": 0,
89.
"data": [
90.
{
91.
"alt": "layer",
92.
"pid": 1,
93.
"src": "https://unpkg.com/[email protected]/demo/layer.png",
94.
},
95.
{
96.
"alt": "壁纸",
97.
"pid": 3,
98.
"src": "https://unpkg.com/[email protected]/demo/000.jpg",
99.
},
100.
{
101.
"alt": "浩瀚宇宙",
102.
"pid": 5,
103.
"src": "https://unpkg.com/[email protected]/demo/outer-space.jpg",
104.
}
105.
]
106.
}
107.
});
108.
}
109.
})
110.
});
111.
</script>
112.
113.
</body>
114.
</html>
更多演示
弹出位置</>
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<div class="layui-btn-container">
12.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="t">上</button>
13.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="r">右</button>
14.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="b">下</button>
15.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="l">左</button>
16.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="rt">右上</button>
17.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="rb">右下</button>
18.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="lb">左下</button>
19.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="lt">左上</button>
20.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="auto">正中</button>
21.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="">任意</button>
22.
</div>
23.
24.
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
25.
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
26.
<script>
27.
layui.use(function(){
28.
var layer = layui.layer;
29.
var util = layui.util;
30.
var $ = layui.$;
31.
// 事件
32.
util.on('lay-on', {
33.
'test-offset': function(){
34.
var othis = $(this);
35.
var offset = othis.data('offset');
36.
// 弹出位置
37.
layer.open({
38.
type: 1,
39.
offset: offset || ['200px', '280px'], // 详细可参考 offset 属性
40.
id: 'ID-demo-layer-offset-'+ offset, // 防止重复弹出
41.
content: '<div style="padding: 16px;">'+ othis.text() +'</div>',
42.
area: '240px',
43.
btn: '关闭全部',
44.
btnAlign: 'c', // 按钮居中
45.
shade: 0, // 不显示遮罩
46.
yes: function(){
47.
layer.closeAll();
48.
}
49.
});
50.
}
51.
});
52.
});
53.
</script>
54.
55.
</body>
56.
</html>
弹出方向 2.8+</>
从页面四个边缘弹出（抽屉效果）：
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<p>从页面四个边缘弹出（抽屉效果）：</p>
12.
<div class="layui-btn-container">
13.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-t">从上往下</button>
14.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-r">从右往左</button>
15.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-b">从下往上</button>
16.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-l">从左往右</button>
17.
</div>
18.
19.
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
20.
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
21.
<script>
22.
layui.use(function(){
23.
var layer = layui.layer;
24.
var util = layui.util;
25.
var $ = layui.$;
26.
// 事件
27.
util.on('lay-on', {
28.
'test-offset-t': function(){
29.
layer.open({
30.
type: 1,
31.
offset: 't',
32.
anim: 'slideDown', // 从上往下
33.
area: ['100%', '160px'],
34.
shade: 0.1,
35.
shadeClose: true,
36.
id: 'ID-demo-layer-direction-t',
37.
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
38.
});
39.
},
40.
'test-offset-r': function(){
41.
layer.open({
42.
type: 1,
43.
offset: 'r',
44.
anim: 'slideLeft', // 从右往左
45.
area: ['320px', '100%'],
46.
shade: 0.1,
47.
shadeClose: true,
48.
id: 'ID-demo-layer-direction-r',
49.
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
50.
});
51.
},
52.
'test-offset-b': function(){
53.
layer.open({
54.
type: 1,
55.
offset: 'b',
56.
anim: 'slideUp', // 从下往上
57.
area: ['100%', '160px'],
58.
shade: 0.1,
59.
shadeClose: true,
60.
id: 'ID-demo-layer-direction-b',
61.
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
62.
});
63.
},
64.
'test-offset-l': function(){
65.
layer.open({
66.
type: 1,
67.
offset: 'l',
68.
anim: 'slideRight', // 从左往右
69.
area: ['320px', '100%'],
70.
shade: 0.1,
71.
shadeClose: true,
72.
id: 'ID-demo-layer-direction-l',
73.
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
74.
});
75.
}
76.
});
77.
});
78.
</script>
79.
80.
</body>
81.
</html>
其他演示</>
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<div class="layui-btn-container">
12.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-max">
13.
最大化弹出
14.
</button>
15.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-scrollbar">
16.
弹出时屏蔽浏览器滚动条
17.
</button>
18.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-lockscreen">
19.
页面锁屏 <span class="layui-badge-dot"></span>
20.
</button>
21.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-shade">
22.
自定义遮罩颜色和透明度
23.
</button>
24.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-stack">
25.
<span class="layui-badge-dot"></span> 多窗口模式 + 层叠置顶 + Esc 关闭
26.
</button>
27.
</div>
28.
<style>
29.
.class-demo-layer-lockscreen{background: url(https://unpkg.com/[email protected]/img/wallpaper/001.jpg) #16b777; background-size: cover; color: rgba(255,255,255,1);}
30.
.class-demo-layer-lockscreen .layui-form{position: absolute; top: 50%; left: 50%; width: 300px; transform: translate(-50%, -50%);}
31.
.class-demo-layer-lockscreen .layui-form > div{margin-bottom: 8px;}
32.
.class-demo-layer-pin{width: 100%; height: 38px; padding: 0 8px; background-color: rgba(255,255,255,.8); border: none; border-radius: 3px; box-sizing: border-box;}
33.
.class-demo-layer-lockscreen .layui-input-suffix{pointer-events: auto; background-color: rgba(0,0,0,.5); border-radius: 0 3px 3px 0;}
34.
.class-demo-layer-lockscreen .layui-input-suffix .layui-icon-right{cursor: pointer; color: #fff;}
35.
</style>
36.
37.
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
38.
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
39.
<script>
40.
layui.use(function(){
41.
var layer = layui.layer;
42.
var util = layui.util;
43.
var form = layui.form;
44.
var $ = layui.$;
45.
// 事件
46.
util.on('lay-on', {
47.
'test-more-max': function(){
48.
layer.open({
49.
type: 1,
50.
content: '<div style="padding: 16px;">任意 HTML 内容</div>',
51.
area: ['320px', '195px'], // 初始宽高
52.
maxmin: true,
53.
success: function(layero, index){
54.
layer.full(index); // 最大化
55.
}
56.
});
57.
},
58.
'test-more-scrollbar': function(){
59.
layer.open({
60.
content: '浏览器滚动条已暂时屏蔽，关闭弹层后自动恢复',
61.
scrollbar: false
62.
});
63.
},
64.
'test-more-lockscreen': function(){
65.
layer.open({
66.
type: 1,
67.
title: false, // 禁用标题栏
68.
closeBtn: false, // 禁用默认关闭按钮
69.
area: ['100%', '100%'],
70.
scrollbar: false, // 暂时屏蔽浏览器滚动条
71.
anim: -1, // 禁用弹出动画
72.
isOutAnim: false, // 禁用关闭动画
73.
resize: false, // 禁用右下角拉伸尺寸
74.
id: 'ID-layer-demo-inst',
75.
skin: 'class-demo-layer-lockscreen', // className
76.
content: ['<div class="layui-form">',
77.
'<div class="layui-input-wrap">',
78.
'<input type="password" class="class-demo-layer-pin" lay-affix="eye">',
79.
'<div class="layui-input-suffix">',
80.
'<i class="layui-icon layui-icon-right" id="ID-layer-demo-unlock"></i>',
81.
'</div>',
82.
'</div>',
83.
'<div>输入 111111 后回车，即可退出锁屏示例</div>',
84.
'</div>'].join(''),
85.
success: function(layero, index){
86.
var input = layero.find('input');
87.
var PASS = '111111';
88.
89.
form.render(); // 表单组件渲染
90.
input.focus();
91.
// 点击解锁按钮
92.
var elemUnlock = layero.find('#ID-layer-demo-unlock');
93.
elemUnlock.on('click', function(){
94.
if($.trim(input[0].value) === PASS){
95.
layer.close(index);
96.
layer.closeLast('dialog'); // 关闭最新打开的信息框
97.
} else {
98.
layer.msg('锁屏密码输入有误', {offset: '16px', anim: 'slideDown'})
99.
input.focus();
100.
}
101.
});
102.
// 回车
103.
input.on('keyup', function(e){
104.
var elem = this;
105.
var keyCode = e.keyCode;
106.
if(keyCode === 13){
107.
elemUnlock.trigger('click');
108.
}
109.
});
110.
}
111.
})
112.
},
113.
'test-more-shade': function(){
114.
layer.open({
115.
type: 1,
116.
content: '<div style="padding: 16px;">任意 HTML 内容</div>',
117.
area: ['320px', '195px'], // 初始宽高
118.
shade: [0.9, '#000'],
119.
shadeClose: true // 点击遮罩区域，关闭弹层
120.
});
121.
},
122.
'test-more-stack': function(){
123.
var that = this;
124.
// 多窗口模式 + 层叠置顶 + Esc 关闭
125.
layer.open({
126.
type: 1,
127.
title: '当你选择该窗体时，即会在最顶端',
128.
area: ['390px', '260px'],
129.
shade: 0,
130.
maxmin: true,
131.
offset: [ // 为了便于演示，此处采用随机坐标
132.
Math.random()*($(window).height()-300),
133.
Math.random()*($(window).width()-390)
134.
],
135.
content: '<div style="padding: 16px;">内容标记：'+ new Date().getTime() + '，按 ESC 键可关闭。<br><br>当你的页面有很多很多 layer 窗口，你需要像 Window 窗体那样，点击某个窗口，该窗体就置顶在上面，那么 layer.setTop() 可以来轻松实现。它采用巧妙的逻辑，以使这种置顶的性能达到最优。</div>',
136.
btn: ['继续弹出', '全部关闭'], //只是为了演示
137.
yes: function(){
138.
$(that).click();
139.
},
140.
btn2: function(){
141.
layer.closeAll();
142.
},
143.
zIndex: layer.zIndex, // 重点 1 --- 初始设置当前最高层叠顺序，
144.
success: function(layero, index){
145.
layer.setTop(layero); // 重点 2 --- 保持选中窗口置顶
146.
147.
// 记录索引，以便按 esc 键关闭。事件见代码最末尾处。
148.
layer.escIndex = layer.escIndex || [];
149.
layer.escIndex.unshift(index);
150.
// 选中当前层时，将当前层索引放置在首位
151.
layero.on('mousedown', function(){
152.
var _index = layer.escIndex.indexOf(index);
153.
if(_index !== -1){
154.
layer.escIndex.splice(_index, 1); //删除原有索引
155.
}
156.
layer.escIndex.unshift(index); //将索引插入到数组首位
157.
});
158.
},
159.
end: function(){
160.
//更新索引
161.
if(typeof layer.escIndex === 'object'){
162.
layer.escIndex.splice(0, 1);
163.
}
164.
}
165.
});
166.
}
167.
});
168.
// 多窗口模式 - esc 键
169.
$(document).on('keyup', function(e){
170.
if(e.keyCode === 27){
171.
layer.close(layer.escIndex ? layer.escIndex[0] : 0);
172.
}
173.
});
174.
});
175.
</script>
176.
177.
</body>
178.
</html>
异步按钮</>
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<p><button type="button" class="layui-btn layui-btn-primary" lay-on="bs_alert">alert</button>
12.
<button type="button" class="layui-btn layui-btn-primary" lay-on="bs_confirm">confirm</button>
13.
<button type="button" class="layui-btn layui-btn-primary" lay-on="bs_msg">msg</button>
14.
<button type="button" class="layui-btn layui-btn-primary" lay-on="bs_open">open</button>
15.
<button type="button" class="layui-btn layui-btn-primary" lay-on="bs_prompt">prompt(不支持)</button></p>
16.
17.
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
18.
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
19.
<script>
20.
layui.use(function () {
21.
var $ = layui.$
22.
var util = layui.util;
23.
var sleep = function (time) {
24.
return $.Deferred(function (defer) {
25.
setTimeout(function () {
26.
defer.resolve();
27.
}, time)
28.
})
29.
}
30.
var enableBtnAsync = true;
31.
util.on({
32.
bs_alert: function () {
33.
layer.alert('对话框内容', {
34.
btnAsync: enableBtnAsync,
35.
}, function (index, layero, that) {
36.
var defer = $.Deferred();
37.
that.loading(true);
38.
sleep(1000).then(defer.resolve);
39.
return defer.promise();
40.
});
41.
},
42.
bs_confirm: function () {
43.
layer.confirm('一个询问框的示例？', {
44.
btnAsync: enableBtnAsync,
45.
btn: ['确定', '关闭'] //按钮
46.
}, function (index, layero, that) {
47.
var defer = $.Deferred();
48.
that.loading(true);
49.
sleep(1000).then(defer.resolve);
50.
return defer.promise();
51.
});
52.
},
53.
bs_msg: function () {
54.
layer.msg('第二个回调', {
55.
btnAsync: enableBtnAsync,
56.
time: 20000, // 20s 后自动关闭
57.
btn: ['明白了', '知道了'],
58.
btn1: function (index, layero, that) {
59.
var defer = $.Deferred();
60.
that.loading(true);
61.
sleep(1000).then(defer.resolve);
62.
return defer.promise();
63.
}
64.
});
65.
},
66.
bs_open: function () {
67.
layer.open({
68.
btnAsync: enableBtnAsync,
69.
type: 1,
70.
area: ['500px', '300px'],
71.
btn: ['确定', '关闭'],
72.
btn1: function (index, layero, that) {
73.
var defer = $.Deferred();
74.
that.loading(true);
75.
sleep(1000).then(defer.resolve);
76.
return defer.promise();
77.
},
78.
btn2: function (index, layero, that) {
79.
var defer = $.Deferred();
80.
that.loading(true);
81.
sleep(1000).then(defer.resolve);
82.
return defer.promise();
83.
}
84.
})
85.
},
86.
// 不支持 btnAsync
87.
bs_prompt: function () {
88.
layer.prompt({
89.
formType: 2,
90.
value: '初始值',
91.
title: '请输入值',
92.
area: ['500px', '300px'] // 自定义文本域宽高
93.
}, function (value, index, elem) {
94.
alert(value);
95.
layer.close(index);
96.
});
97.
}
98.
})
99.
});
100.
</script>
101.
102.
</body>
103.
</html>
主题风格
Preview</>
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<div class="layui-btn-container">
12.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-alert">
13.
墨绿与深蓝主题
14.
</button>
15.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10">
16.
Windows 10 风格信息框 <span class="layui-badge-dot"></span>
17.
</button>
18.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10-page">
19.
Win10 风格页面层 <span class="layui-badge-dot"></span>
20.
</button>
21.
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-custom">自定义任意主题</button>
22.
</div>
23.
<style>
24.
/* 自定义其他任意主题 */
25.
.class-layer-demo-custom .layui-layer-title{background-color: #EDEFF2;}
26.
.class-layer-demo-custom .layui-layer-btn{padding: 5px 10px 10px;}
27.
.class-layer-demo-custom .layui-layer-btn a{background: #fff; border-color: #E9E7E7; color: #333;}
28.
.class-layer-demo-custom .layui-layer-btn .layui-layer-btn0{border-color: #FA584D; background-color: #FA584D; color: #fff;}
29.
</style>
30.
31.
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
32.
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
33.
<script>
34.
layui.use(function(){
35.
var layer = layui.layer;
36.
var util = layui.util;
37.
// 事件
38.
util.on('lay-on', {
39.
'test-skin-alert': function(){
40.
layer.alert('墨绿风格，点击继续确认看深蓝', {
41.
skin: 'layui-layer-molv' // 样式类名
42.
}, function(){
43.
layer.alert('深蓝', {
44.
skin: 'layui-layer-lan'
45.
});
46.
});
47.
},
48.
'test-skin-win10': function(){
49.
layer.alert('Windows 10 风格主题', {
50.
skin: 'layui-layer-win10', // 2.8+
51.
shade: 0.01,
52.
btn: ['确定', '取消']
53.
})
54.
},
55.
'test-skin-win10-page': function(){
56.
// 此处以一个简单的 Win10 风格记事本为例
57.
layer.open({
58.
type: 1, // 页面层类型
59.
skin: 'layui-layer-win10', // 2.8+
60.
shade: 0.01,
61.
area: ['50%', '60%'],
62.
maxmin: true,
63.
title: '*无标题 - 记事本',
64.
content: [
65.
'<div style="padding: 0 8px; height: 20px; line-height: 20px; border-bottom: 1px solid #F0F0F0; box-sizing: border-box; font-size: 12px;">',
66.
// 自定义菜单，此处仅作样式演示，具体功能可自主实现
67.
[
68.
'<a href="javascript:;">文件(F)</a>',
69.
'<a href="javascript:;" >编辑(E)</a> ',
70.
'<a href="javascript:;" >格式(O)</a> ',
71.
'<a href="javascript:;" >查看(V)</a> ',
72.
'<a href="javascript:;" >帮助(H)</a> ',
73.
].join(' '),
74.
'</div>',
75.
'<textarea style="position: absolute; top: 20px; width: 100%; height: calc(100% - 20px); padding: 6px; border: none; resize: none; overflow-y: scroll; box-sizing: border-box;"></textarea>'
76.
].join('')
77.
});
78.
},
79.
'test-skin-custom': function(){
80.
layer.alert('自定义其他任意主题', {
81.
skin: 'class-layer-demo-custom'
82.
})
83.
}
84.
})
85.
});
86.
</script>
87.
</script>
88.
89.
</body>
90.
</html>
小贴士
事实上 layer 丰富的基础属性，可足够让您的弹出层变得千变万化，为了避免占用太多篇幅，就不做过多演示了。
API
API 描述 var layer = layui.layer 获得 layer 模块。 弹出 : - layer.open(options) 打开弹层，核心方法。下述所有弹出方式均为该方法的二次封装 layer.alert(content, options, yes) 弹出 dialog 类型信息框。 layer.confirm(content, options, yes, cancel) 弹出 dialog 类型询问框。 layer.msg(content, options, end) 弹出 dialog 类型提示框。 layer.load(icon, options) 弹出 loading 类型加载层。 layer.tips(content, elem, options) 弹出 tips 类型贴士层。 layer.prompt(options, yes) 弹出 page 类型输入框层。 layer.photos(options) 弹出 page 类型图片层。 layer.tab(options) 弹出 page 类型标签页层。 关闭 : - layer.close(index, callback) 关闭对应的层，核心方法。 layer.closeAll(type, callback) 关闭所有对应类型的层。 layer.closeLast(type, callback) 2.8+ 关闭最近打开的对应类型的层。 其他 : - layer.config(options) 全局配置默认属性。 layer.ready(callback) 样式初始化就绪。 layer.style(index, css) 重新设置弹层样式。 layer.title(title, index) 设置弹层的标题。 layer.getChildFrame(selector, index) 获取 iframe 页中的元素。 layer.getFrameIndex(window.name) 在 iframe 页中获取弹层索引。 layer.iframeAuto(index) 设置 iframe 层高度自适应。 layer.iframeSrc(index, url) 重新设置 iframe 层 URL。 layer.index 获取最新弹出层的索引 layer.zIndex 获取最新弹出层的层叠顺序 layer.setTop(layero) 将对应弹层的层叠顺序为置顶。 layer.full(index) 设置弹层最大化尺寸。 layer.min(index) 设置弹层最小化尺寸。 layer.restore(index) 还原弹层尺寸。打开弹层
layer.open(options);
参数 options : 基础属性选项。#详见属性打开弹层的核心方法，其他不同类型的弹出方法均为该方法的二次封装。
01.
// 该方法返回当前层的唯一索引，以便其他方法对该弹层进行相关操作
02.
var index = layer.open({
03.
type: 1, // page 层类型，其他类型详见「基础属性」
04.
content: '<div style="padding: 16px;">test</div>'
05.
});
基础属性
属性名 描述 类型 默认值 type弹层类型。 可选值有：
0 dialog 信息框（默认），同时只能存在一个层 1 page 页面层，可同时存在多个层 2 iframe 内联框架层，可同时存在多个层 3 loading 加载层，同时只能存在一个层 4 tips 贴士层，可配置同时存在多个层layer 弹层由以上 5 种类型构成。 不同的类型代表不同的弹出形态，layer 提供的所有的弹出方式均由此衍生。
number0
title弹层标题。其值支持以下可选类型：
若为 string 类型 : 则表示为弹层的标题文本，如：01.
title: '标题'
若为 array 类型 : 则可设置标题文本和标题栏 CSS 样式：01.
title: ['标题', 'font-size: 18px;']
若为 boolean 类型 : 则可设为 false 不显示标题栏。01.
title: false // 不显示标题栏
stringarray
boolean
信息
content
弹层内容。 可传入的值比较灵活，支持以下使用场景：
若 type: 1（页面层）: 则 content 可传入值如下：01.
// 普通字符
02.
layer.open({
03.
type: 1,
04.
content: '传入任意文本或 HTML'
05.
});
06.
// 捕获页面已存在的 DOM 元素或 jQuery 对象
07.
layer.open({
08.
type: 1,
09.
content: $('#id') // 捕获层
10.
});
注意： 若采用捕获层，则捕获的元素必须存放在 <body> 根节点下，否则可能被父级容器的相对定位所影响。
若 type: 2（iframe 层）: 则 content 可传入值如下：01.
// iframe URL
02.
layer.open({
03.
type: 2,
04.
content: 'http://cn.bing.com' // URL
05.
});
06.
// 是否屏蔽 iframe 滚动条
07.
layer.open({
08.
type: 2,
09.
// 数组第二个成员设为 no，即屏蔽 iframe 滚动条
10.
content: ['http://cn.bing.com', 'yes']
11.
});
若为其他弹层类型，传入普通字符即可。相关效果可参考：#示例
area
设置弹层的宽高，其值支持以下可选类型：
若为 array 类型，则可同时设置宽高 area: ['520px', '320px'] 固定宽度和高度 area: ['auto', '320px'] 宽度自动，高度固定 area: ['520px', 'auto'] 宽度固定，高度自动 若为 string 类型，则可定义宽度和宽高均自适应： area: '520px' 宽度固定，高度自适应 area: 'auto' 宽度和高度均自适应 arraystring
auto
maxWidth弹层的最大宽度。当 area 属性设置宽度自适应时有效。
number360
maxHeight弹层的最大高度。当 area 属性设置高度自适应时有效。
number -offset
弹层的偏移坐标。 支持以下可选值：
offset: 'auto' 坐标始终垂直水平居中 offset: '16px' 只设置垂直坐标，水平保持居中 offset: ['16px', '16px'] 设置垂直和水平坐标 offset: 't' 上边缘 offset: 'r' 右边缘 offset: 'b' 下边缘 offset: 'l' 左边缘 offset: 'rt' 右上角 offset: 'rb' 右下角 offset: 'lt' 左上角 offset: 'lb' 左下角当设置边缘坐标时，可配合 anim 属性实现抽屉弹出效果。
stringarray
auto
anim
弹层的出场动画。支持以下可选值：
anim: 0 平滑放大。默认 anim: 1 从上掉落 anim: 2 从最底部往上滑入 anim: 3 从左滑入 anim: 4 从左翻滚 anim: 5 渐显 anim: 6 抖动边缘抽屉动画 2.8+：
anim: 'slideDown' 从上边缘往下 anim: 'slideLeft' 从右边缘往左 anim: 'slideUp' 从下边缘往上 anim: 'slideRight' 从左边缘往右抽屉动画一般配合 offset 属性实现边缘弹出。#详见示例
numberstring
0
isOutAnim是否开启弹层关闭时的动画。
booleantrue
maxmin是否开启标题栏的最大化和最小化图标。
booleanfalse
closeBtn
是否开启标题栏的关闭图标，或设置关闭图标风格。
closeBtn: 0 不显示关闭图标 closeBtn: 1 关闭图标默认风格 closeBtn: 2 关闭图标风格二 number1
icon
提示图标。 信息框和加载层的私有参数。
若为信息框，支持传入 0-6 的可选值。默认为 -1，即不显示图标。 若为加载层，支持传入 0-2 的可选值
01.
// eg1
02.
layer.alert('成功提示', {icon: 1});
03.
// eg2
04.
layer.msg('开心表情', {icon: 6});
05.
// eg3
06.
layer.load(1); // 加载层风格一
number-1
btn
自定义按钮。 页面层默认不开启。 按钮可无限数量，每一个按钮均会按照数组顺序生成对应的回调函数，如：
01.
// eg1
02.
layer.confirm('询问框？', {
03.
btn: ['按钮1', '按钮2', '按钮3']
04.
});
05.
// eg2
06.
layer.open({
07.
content: 'test',
08.
btn: ['按钮1', '按钮2', '按钮3'],
09.
// 按钮1 的回调
10.
btn1: function(index, layero, that){},
11.
btn2: function(index, layero, that){
12.
// 按钮2 的回调
13.
// return false // 点击该按钮后不关闭弹层
14.
},
15.
btn3: function(index, layero, that){
16.
// 按钮3 的回调
17.
// return false // 点击该按钮后不关闭弹层
18.
}
19.
});
string -btnAlign
按钮水平对其方式。支持以下可选值：
btnAlign: 'l' 按钮左对齐 btnAlign: 'c' 按钮水平居中对齐 btnAlign: 'r' 按钮右对齐。默认值，不用设置 stringr
btnAsync 2.9.12+
异步按钮。开启之后，除 layer.prompt 的按钮外，按钮回调的返回值将支持 boolean | Promise<boolean> | JQueryDeferred<boolean> 类型，返回 false 或 Promise.reject 时阻止关闭。
注意，此时 yes 和 btn1(两者等效) 回调的默认行为发生了变化，即由触发时不关闭弹层变为关闭弹层。
01.
var sleep = function (time) {
02.
return $.Deferred(function (defer) {
03.
setTimeout(function () {
04.
defer.resolve();
05.
}, time)
06.
})
07.
}
08.
// 下面以 confirm 层为例
09.
layer.confirm('一个询问框的示例？', {
10.
btnAsync: true,
11.
btn: ['确定', '关闭'] // 按钮
12.
},
13.
function (index, layero, that) {
14.
var defer = $.Deferred();
15.
// 注: that.loading() 仅 btnAsync 开启后支持，参数为 boolean 类型，表示打开或关闭按钮的加载效果。
16.
that.loading(true);
17.
sleep(1000).then(defer.resolve);
18.
return defer.promise();
19.
}
20.
);
booleanfalse
skin
弹层的主题风格。通过赋值对应的 className，实现对主题样式的定制。除了默认主题风格，还支持以下可选主题：
layui-layer-molv 墨绿主题 layui-layer-lan 深蓝主题 layui-layer-win10 Windows 10 主题 2.8+还可传入其他任意 className 来自定义主题。 参考：#示例
string -shade
弹层的遮罩。 支持以下写法：
shade: 0.3 设置遮罩深色背景的透明度 shade: [0.3, '#FFF'] 设置遮罩透明度和颜色值 shade: 0 不显示遮罩 numberarray
0.3
shadeClose是否点击遮罩时关闭弹层。当遮罩存在时有效。
booleanfalse
id弹层的唯一索引值。 一般用于页面层或 iframe 层弹出时的状态识别，设置该属性可防止弹层的重复弹出。
string - hideOnClose 2.8.3+关闭弹层时，是否将弹层设置为隐藏状态（而非移除），当再次打开，直接显示原来的弹层。 若设为 true，则必须同时设置 id 属性方可有效。
booleanfalse
time弹层自动关闭所需的毫秒数。 如 time: 3000 ，即代表 3 秒后自动关闭。 提示框、加载层、Tips 层三种弹出模式默认开启。
number0
fixed弹层是否固定定位，即始终显示在页面可视区域。
booleantrue
zIndex弹层的初始层叠顺序值。
number19891014
resize是否允许拖拽弹层右下角拉伸尺寸。 该属性对加载层和 tips 层无效。
booleantrue
scrollbar打开弹层时，是否允许浏览器出现滚动条。
booleantrue
minStack 2.6+点击标题栏的最小化时，是否从页面左下角堆叠排列。
booleantrue
removeFocus 2.8+是否移除弹层触发元素的焦点，避免按回车键时重复弹出。
booleantrue
move绑定弹层的拖拽元素。 默认为触发弹层的标题栏进行拖拽。也可以设置 move: false 禁止拖拽。 用法参考：#示例
stringDOM
boolean - moveOut
否允许拖拽到窗口外
booleanfalse
tips设置 tips 层的吸附位置和背景色，tips 层的私有属性。
若为 number 类型，则支持 1-4 的可选值，分别代表上右下左的吸附位置。如： tips: 1 若为 array 类型，则支持设置吸附位置和背景色，如：01.
tips: [1, '#000'] // 吸附在上的深色贴士层
numberarray
2
tipsMore是否允许同时存在多个 tips 层，即不销毁上一个 tips。
booleanfalse
回调函数
success
打开弹层成功后的回调函数。返回的参数如下：
01.
layer.open({
02.
type: 1,
03.
content: '内容',
04.
success: function(layero, index, that){
05.
// 弹层的最外层元素的 jQuery 对象
06.
console.log(layero);
07.
// 弹层的索引值
08.
console.log(index);
09.
// 弹层内部原型链中的 this --- 2.8+
10.
console.log(that);
11.
}
12.
});
yes
点击「确定」按钮的回调函数。返回的参数同 success
01.
layer.open({
02.
content: '内容',
03.
yes: function(index, layero, that){
04.
// do something
05.
layer.close(index); // 关闭弹层
06.
}
07.
});
cancel
点击标题栏关闭按钮的回调函数。返回的参数同 `success`
01.
layer.open({
02.
content: '内容',
03.
cancel: function(index, layero, that){
04.
if(confirm('确定要关闭么')){
05.
layer.close(index);
06.
}
07.
return false; // 阻止默认关闭行为
08.
}
09.
});
beforeEnd 2.9.11+
弹层被关闭前的回调函数。如果返回 false 或者 Promise.reject，将会取消关闭操作。
01.
layer.open({
02.
content: '<div style="padding: 32px;"><input id="id"/></div>',
03.
/** @type {(layero: JQuery, index: number) => boolean | JQueryDeferred<boolean> | Promise<boolean>} */
04.
beforeEnd: function(layero, index, that){
05.
return $.Deferred(function(defer){
06.
var el = layero.find('#id');
07.
var val = el.val().trim();
08.
if(val){
09.
layer.confirm('关闭后您填写的内容将不会得到保存，确定关闭吗？', function (i) {
10.
layer.close(i);
11.
defer.resolve(true)
12.
});
13.
}else{
14.
defer.resolve(true)
15.
}
16.
}).promise();
17.
}
18.
});
end
弹层被关闭且销毁后的回调函数。
01.
layer.open({
02.
content: '内容',
03.
end: function(){
04.
console.log('弹层已被移除');
05.
}
06.
});
moveEnd
弹层拖拽完毕后的回调函数。
01.
layer.open({
02.
type: 1,
03.
content: '内容',
04.
moveEnd: function(layero){
05.
console.log('拖拽完毕');
06.
}
07.
});
resizing
弹层拉伸过程中的回调函数
01.
layer.open({
02.
type: 1,
03.
content: '内容',
04.
resizing: function(layero){
05.
console.log('拉伸中');
06.
}
07.
});
full
弹层最大化后的回调函数。返回的参数同 success
01.
layer.open({
02.
type: 1,
03.
content: '内容',
04.
full: function(layero, index, that){
05.
console.log('弹层已最大化');
06.
}
07.
});
min
弹层最小化后的回调函数。返回的参数同 success
01.
layer.open({
02.
type: 1,
03.
content: '内容',
04.
min: function(layero, index, that){
05.
// do something
06.
// return false; // 阻止默认最小化
07.
}
08.
});
restore
弹层被还原后的回调函数。返回的参数同 `success`
01.
layer.open({
02.
type: 1,
03.
content: '内容',
04.
restore: function(layero, index, that){
05.
console.log('弹层已还原');
06.
}
07.
});
弹出信息框
layer.alert(content, options, yes);
参数 content : 弹出内容 参数 options : 基础属性选项。#详见属性 参数 yes : 点击确定后的回调函数该方法用于弹出 dialog 类型信息框（type: 0），参数自动向左补位。
01.
// eg1
02.
layer.alert('一个简单的信息框');
03.
// eg2
04.
layer.alert('开启图标', {icon: 1}, function(index){
05.
// do something
06.
// …
07.
layer.close(index);
08.
});
09.
// eg3
10.
layer.alert('不开启图标', function(index){
11.
// do something
12.
// …
13.
layer.close(index);
14.
});
弹出询问框
layer.confirm(content, options, yes, cancel);
参数 content : 弹出内容 参数 options : 基础属性选项。#详见属性 参数 yes : 点击确定后的回调函数 参数 cancel : 点击第二个按钮（默认「取消」）后的回调函数该方法用于弹出 dialog 类型询问框（type: 0），参数自动向左补位。
01.
// eg1
02.
layer.confirm('确定吗?', {icon: 3, title:'提示'}, function(index){
03.
// do something
04.
// …
05.
layer.close(index);
06.
});
07.
// eg2
08.
layer.confirm('确定吗?', function(index){
09.
// do something
10.
// …
11.
layer.close(index);
12.
});
弹出提示框
layer.msg(content, options, end);
参数 content : 弹出内容 参数 options : 基础属性选项。#详见属性 参数 end : 提示框关闭后的回调函数该方法用于弹出 dialog 类型提示框（type: 0），默认 3 秒后自动关闭。参数自动向左补位。
01.
// eg1
02.
layer.msg('普通提示');
03.
// eg2
04.
layer.msg('带 icon 的提示', {icon: 6});
05.
// eg3
06.
layer.msg('关闭后想做些什么', function(){
07.
// do something
08.
});
09.
// eg
10.
layer.msg('提示框', {
11.
icon: 1,
12.
time: 2000 // 设置 2 秒后自动关闭
13.
}, function(){
14.
// do something
15.
});
弹出加载层
layer.load(icon, options);
参数 icon : 加载图标风格，支持 0-2 可选值 参数 options : 基础属性选项。#详见属性该方法用于弹出 load 类型加载层（type: 3）。
01.
// eg1
02.
var index = layer.load(); // 默认加载图标风格
03.
// eg2
04.
var index = layer.load(1); // 加载图标风格 1
05.
// eg3
06.
var index = layer.load(2, {time: 10*1000}); // 加载图标风格，并设置最长等待 10 秒
07.
// 关闭加载层
08.
layer.close(index);
弹出贴士层
layer.tips(content, elem, options);
参数 content : 弹出内容 参数 elem : 吸附的目标元素选择器或对象 参数 options : 基础属性选项。#详见属性该方法用于弹出 tips 类型贴士层（type: 4），默认 3 秒后自动关闭。
01.
// eg1
02.
layer.tips('小贴士', '#id');
03.
// eg2
04.
$('#id').on('click', function(){
05.
var elem = this;
06.
layer.tips('小贴士', elem); //在元素的事件回调体中，follow直接赋予this即可
07.
});
08.
// eg3
09.
layer.tips('显示在目标元素上方', '#id', {
10.
tips: 1 // 支持 1-4 可选值，更多详见基础属性中的 tips 介绍
11.
});
弹出输入框
layer.prompt(options, yes);
参数 options : 基础属性选项。除了支持 基础属性 之外，还支持下表私有属性： 私有属性 描述 类型 默认值 formType 输入框类型。支持以下可选值： 0 文本输入框 1 密令输入框 2 多行文本输入框 number 0 value 输入框初始值 string - maxlength 可输入的最大字符长度 number 500 placeholder 输入框内容为空时的占位符 string - 参数 yes : 点击确定后的回调函数该方法用于弹出输入框层，基于 type: 1（即 page 层）的自定义内容。 效果参考： #示例
01.
// eg1
02.
layer.prompt(function(value, index, elem){
03.
alert(value); // 得到 value
04.
layer.close(index); // 关闭层
05.
});
06.
07.
// eg2
08.
layer.prompt({
09.
formType: 2,
10.
value: '初始值',
11.
title: '请输入值',
12.
area: ['800px', '350px'] // 自定义文本域宽高
13.
}, function(value, index, elem){
14.
alert(value); // 得到 value
15.
layer.close(index); // 关闭层
16.
});
弹出图片层
layer.photos(options);
参数 options : 基础属性选项。除了支持 基础属性 之外，还支持下表私有属性： 私有属性 描述 类型 默认值 photos 图片层的数据源，格式详见下述示例。 object - toolbar 2.8.16+ 是否显示顶部工具栏 boolean true footer 2.8.16+ 是否隐藏底部栏 boolean true tab 图片层切换后的回调函数，返回的参数见下述示例 function -该方法用于弹出图片层，基于 type: 1（即 page 层）的自定义内容。
用法一：直接赋值图片数据。 效果参考： #示例
01.
layer.photos({
02.
photos: { // 图片层的数据源
03.
"title": "", // 相册标题
04.
"id": 123, // 相册 id
05.
"start": 0, // 初始显示的图片序号，默认 0
06.
"data": [ // 相册包含的图片，数组格式
07.
{
08.
"alt": "图片名",
09.
"pid": 666, // 图片id
10.
"src": "", // 原图地址
11.
"thumb": "" // 缩略图地址
12.
},
13.
// …
14.
]
15.
},
16.
tab: function(data, layero){ // 图片层切换后的回调
17.
console.log(data); // 当前图片数据信息
18.
console.log(layero); // 图片层的容器对象
19.
}
20.
});
用法二：绑定页面图片元素。点击图片时，弹出对应的图片层。
</>Preview
01.
<!DOCTYPE html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<meta name="viewport" content="width=device-width, initial-scale=1">
06.
<title>Demo</title>
07.
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
08.
<link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
09.
</head>
10.
<body>
11.
<style>
12.
.class-photos-demo img{width: 160px; height: 100px; cursor: pointer;}
13.
</style>
14.
<div id="ID-photos-demo" class="class-photos-demo">
15.
<!-- <img src="缩略图" layer-src="大图地址" layer-pid="图片id，可不写" alt="图片名"> -->
16.
<img src="https://unpkg.com/outeres/demo/layer.png" layer-src="https://unpkg.com/outeres/demo/layer.png" layer-pid="" alt="layer">
17.
<img src="https://unpkg.com/outeres/demo/000.jpg" layer-src="https://unpkg.com/outeres/demo/000.jpg" layer-pid="" alt="壁纸">
18.
<img src="https://unpkg.com/outeres/demo/outer-space.jpg" layer-src="https://unpkg.com/outeres/demo/outer-space.jpg" layer-pid="" alt="星空如此深邃">
19.
</div>
20.
21.
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
22.
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
23.
<script>
24.
layui.use(function(){
25.
var layer = layui.layer;
26.
// 图片层
27.
layer.photos({
28.
photos: '#ID-photos-demo'
29.
});
30.
});
31.
</script>
32.
33.
</body>
34.
</html>
弹出标签层
layer.tab(options);
参数 options : 基础属性选项。除了支持 基础属性 之外，还支持下表私有属性： 私有属性 描述 类型 默认值 tab 标签层的数据源，格式详见下述示例。 array -该方法用于弹出标签层，基于 type: 1（即 page 层）的自定义内容。 效果参考： #示例
01.
layer.tab({
02.
area: ['600px', '300px'],
03.
tab: [{ // 标签层的数据源
04.
title: '标题 1',
05.
content: '内容 1'
06.
}, {
07.
title: '标题 2',
08.
content: '内容 2'
09.
}, {
10.
title: '标题 3',
11.
content: '内容 3'
12.
}]
13.
});
关闭弹层
layer.close(index, callback);
参数 index : 打开弹层时返回的唯一索引 参数 callback : 关闭弹层后的回调函数该方法用于关闭对应的弹层。
01.
// 每一种弹层调用方式，都会返回一个 index
02.
var index1 = layer.open();
03.
var index2 = layer.alert();
04.
var index3 = layer.load();
05.
var index4 = layer.tips();
06.
// 关闭对应的弹层
07.
layer.close(index1);
在 iframe 弹层页面中关闭自身
01.
var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
02.
parent.layer.close(index); // 再执行关闭
关闭所有层
layer.closeAll(type, callback);
参数 type : 弹层的类型。可选值：dialog,page,iframe,loading,tips 参数 callback : 关闭弹层后的回调函数该方法用于关闭所有同类型的弹层。
01.
layer.closeAll(); // 关闭所有类型的层
02.
layer.closeAll('dialog'); // 关闭所有的信息框
03.
layer.closeAll('page'); // 关闭所有的页面层
04.
layer.closeAll('iframe'); // 关闭所有的 iframe 层
05.
layer.closeAll('loading'); // 关闭所有的加载层
06.
layer.closeAll('tips'); // 关闭所有的 tips 层
关闭最近一次打开的层 2.8+
layer.closeLast(type, callback);
参数 type : 弹层的类型。可选值：dialog,page,iframe,loading,tips 参数 callback 2.9+: 关闭弹层后的回调函数该方法用于关闭最近一次打开的对应类型的层。
01.
layer.closeLast('dialog'); // 关闭最近一次打开的信息框
02.
layer.closeLast('page'); // 关闭最近一次打开的页面层
03.
layer.closeLast('iframe'); // 关闭最近一次打开的 iframe 层
04.
layer.closeLast('loading'); // 关闭最近一次打开的加载层
05.
layer.closeLast('tips'); // 关闭最近一次打开的 tips 层
06.
layer.closeLast(['dialog', 'page']); // 关闭最近一次打开的信息框或页面层，2.9.7+
全局配置默认属性
layer.config(options);
参数 options : 基础属性选项。#详见属性该方法用于全局设置弹层的默认基础属性。
01.
layer.config({
02.
title: '默认标题',
03.
skin: '', // 设置默认主题
04.
// … 其他任意基础属性
05.
})
样式初始化就绪
layer.ready(callback);
参数 callback : 初始化完毕后的回调函数该方法一般是在源码方式引入 layui.js，且要在页面初始即弹出层时使用，以确保弹层所依赖的样式文件先行加载。 而引入 release 版的 layui.js 则无需使用该方法，因为弹层样式已经统一合并到 layui.css 中。
01.
// 页面初始弹出层
02.
layer.ready(function(){
03.
layer.alert('对话框内容');
04.
});
重新设置弹层样式
layer.style(index, css);
参数 index : 打开弹层时返回的唯一索引 参数 css : 要设置的 css 属性该方法对 loading 层和 tips 层无效。
01.
// 打开弹层
02.
var index = layer.open({
03.
type: 1,
04.
content: '内容'
05.
});
06.
// 重新给对应层设定 width、top 等
07.
layer.style(index, {
08.
width: '1000px',
09.
top: '10px'
10.
});
设置弹层的标题
layer.title(title, index);
参数 title : 标题 参数 index : 打开弹层时返回的唯一索引01.
// 打开弹层
02.
var index = layer.open({
03.
type: 1,
04.
content: '内容'
05.
});
06.
// 重新设置标题
07.
layer.title('新标题', index)
获取 iframe 页中的元素
layer.getChildFrame(selector, index);
参数 selector : iframe 子页面的选择器或元素对象 参数 index : 打开弹层时返回的唯一索引该方法用于在父页面获取 iframe 子页面中的元素
01.
layer.open({
02.
type: 2, // iframe 层
03.
content: '/layer/test/iframe.html',
04.
success: function(layero, index){
05.
// 获取 iframe 中 body 元素的 jQuery 对象
06.
var body = layer.getChildFrame('body', index);
07.
// 给 iframe 页中的某个输入框赋值
08.
body.find('input').val('Hello layer.');
09.
}
10.
});
在 iframe 页中获取弹层索引
layer.getFrameIndex(window.name);
参数 window.name : 当前 iframe 窗口的 name 属性值该方法用于在 iframe 页面内部获取当前 iframe 弹层的索引，以便关闭自身。
01.
var index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层的索引
02.
parent.layer.close(index); // 关闭当前 iframe 弹层
设置 iframe 层高度自适应
layer.iframeAuto(index);
参数 index : 打开弹层时返回的唯一索引该方法可让 iframe 高度跟随内容自适应
01.
layer.open({
02.
type: 2, // iframe 层
03.
content: '/layer/test/iframe.html',
04.
area: '600px', // 弹层初始宽度
05.
success: function(layero, index, that){
06.
layer.iframeAuto(index); // 让 iframe 高度自适应
07.
that.offset(); // 重新自适应弹层坐标
08.
}
09.
});
重新设置 iframe 层 URL
layer.iframeSrc(index, url);
参数 index : 打开弹层时返回的唯一索引 参数 url : URL 地址01.
// 打开弹层
02.
var index = layer.open({
03.
type: 2, // iframe 层
04.
content: '/layer/test/iframe.html'
05.
});
06.
// 重置 iframe 页面 URL
07.
layer.iframeSrc(index, 'https://cn.bing.com/');
置顶弹层
layer.setTop(layero);
参数 layero : layer 最外层容器的元素对象，一般可通过各个回调函数返回的参数获取。该方法一般用于多弹层模式时，实现点击某个弹层让其层叠顺序置顶。效果参考：#示例
01.
// 多弹层模式的层叠顺序置顶
02.
layer.open({
03.
type: 1, // 页面层
04.
shade: false,
05.
area: ['520px', '320px'],
06.
maxmin: true,
07.
content: '<div style="padding: 16px;">多弹层模式的层叠顺序置顶</div>',
08.
zIndex: layer.zIndex, // 重点 1 --- 初始设置当前最高层叠顺序，
09.
success: function(layero){
10.
layer.setTop(layero); // 重点 2 --- 保持选中窗口置顶
11.
}
12.
});
设置弹层最大化
layer.full(index);
参数 index : 打开弹层时返回的唯一索引01.
// 打开弹窗
02.
var index = layer.open({
03.
type: 1, // 页面层
04.
content: '弹层内容'
05.
});
06.
// 设置弹层最大化
07.
layer.full(index);
设置弹层最小化
layer.min(index);
参数 index : 打开弹层时返回的唯一索引01.
// 打开弹窗
02.
var index = layer.open({
03.
type: 1, // 页面层
04.
content: '弹层内容'
05.
});
06.
// 设置弹层最大化
07.
layer.min(index);
还原弹层
layer.restore(index);
参数 index : 打开弹层时返回的唯一索引当弹层最大化或最小化状态时，执行该方法可还原弹层。
贴士
layer 曾经可作为单独组件使用，鉴于维护成本的考量，目前 layer 组件已完全集成到 Layui 中，而单独版本已不做同步维护。 因此，建议直接使用 layui 中 layer 即可。
网址：通用弹出层组件 layer https://klqsh.com/news/view/250526
相关内容
layer 弹出层组件@layer
layer
layer是什么意思
TLSv1 Record Layer: Encrypted Alert
标准化层（BN，LN，IN，GN）介绍及代码实现
篮球兴趣小组活动计划（通用8篇）
如何轻松关闭 Windows 11 小组件新闻源
兴趣小组活动计划（通用14篇）
提升基层党内组织生活质量
随便看看
最新乐趣
- 肖战趣谈自己的五观，帅而不自知且人间清醒，活该他火！xz
- 蒙面唱将猜猜猜第四季综艺高清完整版免费在线观看
- 《蒙面唱将猜猜猜第二季》在线观看综艺
- 综艺《蒙面唱将猜猜猜第二季》第10期免费高清在线观看完整版
- 综艺《蒙面唱将猜猜猜第二季》第08期免费高清在线观看完整版
- 《蒙面唱将猜猜猜 第五季》第4期国语免费在线观看
- 蒙面唱将猜猜猜是哪个台
- 《我猜我猜我猜猜猜》更新至514期
- 不可错过的儿童综艺《萌娃问天下》！萌娃出题，你敢接招吗？
- 10年前非常火的综艺节目，全都看过的，小孩都能打酱油了
热点乐趣
- 5826
- 3005
- 2950
- 2892
- 2815
- 2565
- 2535
- 2378
- 2251
- 2027
