layer 弹出层组件
2026-07-22 12:28:35GitHub
Gitee
NPM
下载 layer 组件
v
弹层之术
在线测试
layer 是一款多年来备受青睐的 Web
弹出层组件，具备多种交互模式。任何水平段的开发者都能使用，您的页面会因此拥有丰富友好的操作体验。
在与同类组件的选择中，layer
常一度被推荐为首选。这不仅是因为界面风格，而是它尽可能地在以更少的代码展现更强健的功能，且格外注重功能的扩展、易用和实用性，layer
甚至还兼容了包括 IE6
在内的所有浏览器。其数量可观的基础属性和方法，使得您可以自定义太多您需要的风格。
layer 采用 MIT
开源协议，是一个永久免费的公益性项目。多年来，已被广泛应用于不计其数的
Web 平台。layer 也是 Layui 的代表性组件。
弹出已经存在于页面中的一段元素
先睹为快
Alert
扩展皮肤
Confirm
Message
墨绿深蓝风
捕获页
页面层
自定页
Tips
Iframe
Iframe
Loading
Loading
Tips
Prompt
Tab 层
图片层
自动关闭
腾讯云推荐
//特别说明：事件需自己绑定，以下只展现调用代码。
//Alert
layer.alert('内容')
//扩展皮肤
//Confirm
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
//Message
layer.msg('一段提示信息');
//墨绿深蓝风
layer.alert('墨绿风格，点击确认看深蓝', {
skin: 'layui-layer-molv' //样式类名
,closeBtn: 0
}, function(){
layer.alert('偶吧深蓝style', {
skin: 'layui-layer-lan'
,closeBtn: 0
,anim: 4 //动画类型
});
});
//捕获页
layer.open({
type: 1,
shade: false,
//title: false, //是否显示标题
content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function(){
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
}
});
//页面层
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['420px', '240px'], //宽高
content: 'html内容'
});
//自定页
layer.open({
type: 1,
skin: 'layui-layer-demo', //样式类名
closeBtn: 0, //不显示关闭按钮
anim: 2,
shadeClose: true, //开启遮罩关闭
content: '内容'
});
//Tips
layer.tips('Hi，我是tips', '吸附元素选择器，如#id');
//iframe 层
layer.open({
type: 2,
title: 'layer mobile页',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: 'mobile/' //iframe的url
});
//iframe 层
layer.open({
type: 2,
title: '很多时候，我们想最大化看，比如像这个页面。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: 'https://www.baidu.com/'
});
//Loading
var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
//Loading层
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
//Tips
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
tips: [1, '#3595CC'],
time: 4000
});
//Prompt
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
layer.close(index);
alert('演示完毕！您填写的的测试口令为：'+ pass +'
您最后写下了：'+ text);
});
});
//tab 层
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
//图片层
$.getJSON('test/photos.json?v='+new Date, function(json){
layer.photos({
photos: json //格式见API文档手册页
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
});
});
//显示自动关闭倒计秒数
layer.alert('在标题栏显示自动关闭倒计秒数', {
time: 5*1000
,success: function(layero, index){
var timeNum = this.time/1000, setText = function(start){
layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
};
setText(!0);
this.timer = setInterval(setText, 1000);
if(timeNum <= 0) clearInterval(this.timer);
}
,end: function(){
clearInterval(this.timer);
}
});
再试牛刀
信息框
例1
例2
例3
例4
例5
页面层/iframe层
页面层-自定义
页面层-图片
iframe-子父操作
iframe-多媒体
iframe-禁滚动条
加载层
默认
风格2
风格3
风格4
打酱油
tips层
上
右
下
左
允许多个
其它演示
默认prompt
屏蔽浏览器滚动条
弹出即全屏
正上方
更多例子
//信息框-例1
layer.alert('见到你真的很高兴', {icon: 6});
//信息框-例2
layer.msg('一个询问测试？', {
time: 0 //不自动关闭
,btn: ['确定', '关闭']
,yes: function(index){
layer.close(index);
layer.msg('自定义按钮', {
icon: 6
,time: 0
,btn: ['按钮-1','按钮-2','按钮-3']
});
}
});
//信息框-例3
layer.msg('常用提示');
//信息框-例4
layer.msg('常用提示', {icon: 5});
//信息框-例5
layer.msg('常用提示', function(){
//关闭后的操作
});
//页面层-自定义
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true,
skin: 'yourclass',
content: '自定义 HTML 内容'
});
//页面层-图片
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: ['auto'],
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: $('#tong')
});
//iframe层-父子操作
layer.open({
type: 2,
area: ['700px', '450px'],
fixed: false, //不固定
maxmin: true,
content: 'test/iframe.html'
});
//iframe层-多媒体
layer.open({
type: 2,
title: false,
area: ['630px', '360px'],
shade: 0.8,
closeBtn: 0,
shadeClose: true,
content: '//player.youku.com/embed/XMzI1NjQyMzkwNA=='
});
layer.msg('点击任意处关闭');
//iframe层-禁滚动条
layer.open({
type: 2,
area: ['360px', '500px'],
skin: 'layui-layer-rim', //加上边框
content: ['mobile/', 'no']
});
//加载层-默认风格
layer.load();
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000);
//加载层-风格2
layer.load(1);
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000);
//加载层-风格3
layer.load(2);
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000);
//加载层-风格4
layer.msg('加载中', {
icon: 16
,shade: 0.01
});
//打酱油
layer.msg('尼玛，打个酱油', {icon: 4});
//tips层-上
layer.tips('上', '#id或者.class', {
tips: [1, '#0FA6D8'] //还可配置颜色
});
//tips层-右
layer.tips('默认就是向右的', '#id或者.class');
//tips层-下
layer.tips('下', '#id或者.class', {
tips: 3
});
//tips层-左
layer.tips('左边么么哒', '#id或者.class', {
tips: [4, '#78BA32']
});
//tips层-不销毁之前的
layer.tips('不销毁之前的', '#id或者.class', {
tipsMore: true
});
//默认prompt
layer.prompt(function(val, index){
layer.msg('得到了'+val);
layer.close(index);
});
//屏蔽浏览器滚动条
layer.open({
content: '浏览器滚动条已锁',
scrollbar: false
});
//弹出即全屏
var index = layer.open({
type: 2,
content: 'https://dev.layuion.com/jump/alyhot/',
area: ['320px', '195px'],
maxmin: true
});
layer.full(index);
//正上方
layer.msg('灵活运用 offset', {
offset: 't',
anim: 6
});
//更多例子
layer.msg('Hi');
余音缭绕
事实上 layer
提供的丰富的基础属性，已经足够让你的弹出层变得千变万化，请恕本页无法为您逐一演示。如果您仍觉得文档和代码有不当之处，您也可以通过
Git 平台进行反馈，相信 layer
这个小小的界面组件，能够给您的页面交互带来更多地想象和美好体验。