layui提供了页面弹出层组件layer，能够满足用户的各种需求，它不仅可以作为独立组件使用也可以在layui模块化中使用。

layer弹出层分类

layer弹出层有5种，使用type配置参数来指定分类。

type参数：

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：0（信息提示框弹出层，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。

若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

一、信息提示框弹出层

信息框弹出层一般用于用户操作提示，比如提示用户操作成功还是失败。

示例：

layer.open({type:0, //默认就是0，所以可以省略content:'我是信息提示弹出层',icon:1
})

layer针对信息提示弹出层，提供了简化版函数，例如msg和alert

示例：

layer.msg('我是信息提示框');

默认样式以灰色为背景，不带icon图标，3秒之后自动消失。

自定义样式以及消失时间，代码如下：

layer.msg('操作成功!', {icon: 6, time: 2000});

icon样式是6，关闭时间为2秒。效果如下：

关于icon不同的值显现不同的图标，icon如果在信息提示弹出层值可以传入0-6，如果是加载层，可以传入0-2，icon与图标对应关系如下：

icon	含义	图标	示例代码
0（其他数字）	感叹		layer.msg('操作成功!', {icon: 0});
1	正确		layer.msg('操作成功!', {icon: 1});
2	错误		layer.msg('操作失败!', {icon: 2});
3	疑问		layer.msg('操作失败？', {icon: 3});
4	锁定		layer.msg('以锁定！', {icon: 4});
5	不开心		layer.msg('失败！', {icon: 5});
6	开心		layer.msg('开心！', {icon: 6});

二、页面层弹框

页面层弹框对应type为1。该类型无法应用icon图标。

content:支持普通文本、html和DOM

content为html示例：

layer.open({type:1,content:"<h3 style='margin:20px'>我是页面层，content支持普通文本、html、DOM</h3>",btn:["取消"]
})

三、iframe弹出层

iframe弹出层用于在弹出层加载iframe网页，type为2。

content：指定对应网页的地址。
area：指定弹出层的大小。

示例：

layer.open({type:2,content:"https://www.baidu.com",area:['500px','300px']
})

四、加载层

加载层一般用于提示用户数据正在加载，当页面数据加载比较慢时，加载层能够以友好的方式提示用户。type为3.

一般只需要type参数即可，示例：

layer.open({type:3
});

五、tips层

用于在某个dom上提示一些信息，type为4

示例：

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

六、询问框

一般用于当用户做一些删除修改操作或询问问题时提示用户去确认。

示例：

//询问框
layer.confirm('您是如何看待前端开发？', //弹出框内容，支持html//下面是配置选项 {title:'提示',icon:3, //图标，关于icon的各种值和效果查看https://blog.csdn.net/gybshen/article/details/110723407btn: ['重要','奇葩','...'] //按钮,可以有多个},function(){ //第1个按钮回调layer.msg('的确很重要', {icon: 1});}, function(){ //第2个按钮回调layer.msg('也可以这样', {time: 20000, //20s后自动关闭btn: ['明白了', '知道了']});},function(){ //第...个按钮回调}
);

七、自定义弹框

示例：

//自定页
layer.open({type: 1,skin: 'layui-layer-demo', //样式类名closeBtn: 0, //不显示关闭按钮anim: 2,shadeClose: true, //开启遮罩关闭content: '内容' //支持html，支持页面链接
});

效果如下：

八、实战：使用layer实现弹框登录

layer.open({type: 2,title: '用户登录',maxmin: true,skin: 'layui-layer-lan',shadeClose: true, //点击遮罩关闭层area : ['400px' , '280px'],content:'login.html'//弹框显示的url,对应的页面
});

其中‘login.html’是登录页面, 其效果如下：

弹框登录案例，请参考这篇博客：使用layer实现登录弹框，登录成功以后关闭弹框并调用父窗口方法

layui之layer各种弹出层相关推荐

前端框架Layui学习五：弹出层和数据表格
Layui layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,拿来即用. 一.弹出层在 layui 中使用 layer l ...
layer php弹出层,layer官方演示与讲解（jQuery弹出层插件）
特别说明:事件需自己绑定,以下只展现调用代码. //初体验 layer.alert('内容') //第三方扩展皮肤 layer.alert('内容', { icon: 1, skin: 'layer- ...
layer的弹出层的简单的例子
如果不了级的基本的清楚官网查看api网址为 http://layer.layui.com/ 我用的是iframe /!*如果是iframe层*/ layer.open({type: 2, conten ...
layer 关闭弹出层
layer.closeAll(); //疯狂模式,关闭所有层 layer.closeAll('dialog'); //关闭信息框 layer.closeAll('page'); //关闭所有页面层 l ...
js、jQuery、layer实现弹出层的打开、关闭
打开layer layer.open({type: 2,title: '新增收货地址',shadeClose: true,//点击阴影关闭shade: 0.8,area: ['900px', '60% ...
php layui弹出修改功能,非常好用的弹出层 layer，常用功能demo，快速上手！
功能强大,实用,操作方便,文档齐全. 参数灵活,丰富.可以作为开发项目的公共模块,多处使用. 老文档地址:http://layer.layui.com/api.html 已经停止维护常用功能代码de ...
layui弹出层post请求
遇到的问题: 在点击查看二维码时,页面找不到. 我的请求是这样的: layer.open({type: 2,anim: 0,title: "查看二维码",area: ['35%', ...
Layer 弹出层组件
Layer 弹出层组件一.Layer是什么? 用于实现网页中的各种弹出层交互, 如 Alert/Confirm/Message/Tips/Page/Iframe/Loading/Prompt/Tab ...
layer重复弹出(layui弹层同时存在多个)的解决方法
layer重复弹出(layui弹层同时存在多个)的解决方法参考文章: (1)layer重复弹出(layui弹层同时存在多个)的解决方法 (2)https://www.cnblogs.com/sird ...

layui之layer各种弹出层