12layui内置模块-弹出层layer

场景	用前准备	调用方式
作为独立组件使用	如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。	通过script标签引入layer.js后，直接用即可。参考：快速上手
layui模块化使用	如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js	通过layui.use('layer', callback)加载模块

基础参数

基础参数主要指调用方法时用到的配置项，如：layer.open({content:''})， layer.msg('',{time:3})等，其中的content和time即是基础参数，以键值对形式存在，基础参数可合理应用于任何层类型中，不需要所有都去配置，大多数是可选的， lay.open、layer.msg就是内置方法。注意，从2.3开始，无需通过layer.config来加载拓展模块。

type基本层类型

类型：Number，默认：0.

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）。

具体看以下五个例子：

弹出层输入的文本是：

title-标题

类型：String/Array/Boolean，默认：‘信息’

title支持三种类型的值，若你传入的是普通的字符串，如title: '我是标题',那么只会改变标题文本，若你还需要自定义标题区域样式，那么你可以 title: ['文本','font-size:18px;'],数组第二项可以写任意css样式，如果你不想显示标题栏，你可以title:false

content-内容

类型：String/DOM/Array,默认：""。

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。

/!*
 如果是页面层
 */
layer.open({
  type: 1,
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});
/!*
 如果是iframe层
 */
layer.open({
  type: 2,
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});
/!*
 如果是用layer.open执行tips层
 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

skin-样式类名

类型：String，默认：""

skin不仅允许你传入layer内置的样式class名，还可以传入你自定义的class名。这是一个很好的切入点,你可以借助skin完成不同的风格定制

目前layer内置的skin有：layui-layer-lan layui-layer-molv

area-宽高

类型：String/Array,默认："auto"

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，可以area:'500px'，高度仍然是自适应的。

当你宽高都要定义时，可以使用area:['500px','300px']

offset-坐标

类型：String/Array,默认：垂直水平居中

offset默认情况下不用设置。但是如果不想垂直水平居中，可以进行如下赋值。

值	备注
offset:'auto'	默认坐标，即垂直水平居中
offset:'100px'	只定义top坐标，水平保持居中
offset:['100px','50px']	同时定义top、left坐标
offset:'t'	快捷设置顶部坐标
offset:'r'	快捷设置右边缘坐标
offset:'b'	快捷设置底部坐标
offset:'l'	快捷设置左边缘坐标
offset:'lt'	快捷设置左上角
offset:'rt'	快捷设置右上角
offset:'rb'	快捷设置右下角
offset:'lb'	快捷设置左下角

icon-图标。信息框和加载层的私有参数

类型：Number,默认：-1（信息框）/ 0（加载层）

信息框默认不显示图标，当想要显示图标时，默认皮肤可以传入0-6，如果是加载层，可以传入0-2.

btn-按钮

类型：String/Array ,默认：“确认”

信息框模式时，btn默认是一个确认按钮，其他层类型则默认不显示，加载层和tips层则无效。

当只想定义一个按钮时，可以使用btn:'我知道了！'

当想要定义两个按钮时，可以btn:['yes','no']

也可以定义很多的按钮，如：btn:['按钮1','按钮2','按钮3',...]

按钮1的回调是yes,而从按钮2开始，则回调为btn2:function(){}，以此类推。

btnAlign-按钮排列

类型：String,默认：r

可以快捷定义按钮的排列位置，btnAlign的默认值为r，即右对齐，该参数可支持的赋值如下：

值	备注
btnAlign:'l'	按钮左对齐
btnAlign:'c'	按钮居中对齐
btnAlign:'r'	按钮右对齐。默认值，不用设置。

closeBtn-关闭按钮

类型：String/Boolean，默认：1

layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0

shade - 遮罩

类型：String/Array/Boolean，默认：0.3

即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0

shadeClose - 是否点击遮罩关闭

类型：Boolean，默认：false

如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。

time - 自动关闭所需毫秒

类型：Number，默认：0

默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）

id - 用于控制弹层唯一标识

类型：String，默认：空字符

设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式

layui内置模块-弹出层layer

使用场景

基础参数