layui弹出层的使用方法：首先引入jQuery1.8以上的任意版本；然后引入laery.js；最后通过“function show(){var a = layer.open({...});}”方式使用laery.open弹出层即可。

本教程操作环境：Windows7系统、layui2.4&&jquery2.2.1版，Dell G3电脑。

layer 在 layui 体系中的位置比较特殊，甚至让很多人都误以为 layui = layer ui，所以再次强调 layer 只是作为 layui 的一个弹层模块

1、获取laery,你需要去官网下载laery.js 地址--http://layer.layui.com/

2、引入laery.js 在此之前你必须要先引入jQuery1.8以上的任意版本

3、使用laery.open();function show(){

var a = layer.open({

type: 2,

area: ['80%','450px'],

title: '我是标题',

shadeClose: true,

content: ['layer_model.html','no']

});

}

基础参数

1. type 类型type: 1, // 0(信息框，默认)1(页面层)2(iframe层)3(加载层)4(tips层)

2. title 标题title:"我是标题",

//若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;'] 数组第二项可以写任意css样式；

//如果你不想显示标题栏，你可以 title: false

3. content 内容

3.1.如果是页面层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，那么需要字符拼接。

});

});

示例:

3.2.如果是iframe层layer.open({

type: 2,

content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

});

示例:

3.3.如果是用layer.open执行tips层layer.open({

type: 4,

content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM

});

示例:

4. area 宽高

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

5. btn 按钮

信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: '我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no']。当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。如：layer.open({

content: 'test',

btn: ['按钮一', '按钮二', '按钮三'],

yes: function(index, layero){

//按钮【按钮一】的回调

},

btn2: function(index, layero){

//按钮【按钮二】的回调

//return false 开启该代码可禁止点击该按钮关闭

},

btn3: function(index, layero){

//按钮【按钮三】的回调

//return false 开启该代码可禁止点击该按钮关闭

},

cancel: function(){

//右上角关闭回调

//return false 开启该代码可禁止点击该按钮关闭

}

});

6, shade 遮罩

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

如果你的遮罩是存在的那么你还可以设置 shadeClose 是否点击遮罩关闭 默认：false 如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭