layui弹出层（layer）

Layui的弹出层layer可以独立使用，也可以使用Layui模块化使用。下面用独立使用的方式测试：

官网：http://www.layui.com/

官方文档：http://www.layui.com/doc/modules/layer.html

0.引入js

页面引入jQuery1.8以上的任意版本，并引入layer.js

<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/layer.js" ></script>

1.提示框msg

layer.msg(content, options, end);

• content：提示内容
• options：参数：icon：图标0-6，time：自动关闭所需毫秒（毫秒），area：宽高；其他的属性见官方文档
• end：回调函数

// 默认3秒自动消失
layer.msg("提示信息");
// 配置参数
layer.msg("提示信息", {icon:5, time:2000, area:['500px', '300px']});
// 回调函数
lay.msg("提示信息", {icon:5, time:2000}, function() {
	console.log("提示框关闭");
});

2.普通信息框alert

layer.alert(content, options, yes);

• content：提示内容
• options：配置参数，参考官方文档
• yes：确定按钮回调方法

// 提示信息
layer.alert("内容");
// 配置参数
layer.alert('内容', {icon: 1});
// 点击确定回调函数，需要使用layer.close(index)关闭当前层（信息框）
layer.alert('内容', {icon: 1}, function(index) {
	console.log("点击了确定");
	layer.close(index);
});

3.询问框confirm

layer.confirm(content, options, yes, cancel);

• content：内容
• options：配置参数，参考官方文档
• yes：确定按钮回调方法
• cancel：右上角关闭按钮触发的回调

// 确定的回调
layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index) {
	console.log("点击了确定");
	layer.close(index);
});
// 确认、取消的回调
layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index) {
	console.log("点击了确定");
	layer.close(index);
}, function() {
	console.log("点击了取消");
});
// 多个按钮的回调，按钮三开始配置属性：btn3: function(){...}进行回调
layer.confirm('确定删除吗？', {
	btn: ['按钮一', '按钮二', '按钮三'], // 可以无限个按钮
	btn3: function(index) {
		console.log("点击按钮3");
		return false;// 阻止弹窗关闭
	}
}, function(index) {
	console.log("点击按钮1");
	layer.close(index);
}, function(index) {
	console.log("点击按钮2");
});

4.吸附提示tips

layer.tips(content, follow, options)

• content：内容
• follow：吸附的元素
• options：配置参数

// eg1
layer.tips('提示信息', '#id');
// eg2
$('#id').on('click', function() {
	layer.tips('提示信息', this); // 在元素的事件回调体中，follow直接赋予this即可
});
// eg 3
// tips：支持上右下左四个方向，通过1-4进行方向设定；定义一些颜色，可以设定tips: [1, '#c00']
layer.tips('在上面', '#id', {
	tips: 1
});

5.加载层load

layer.load(icon, options)：load默认不会自动关闭

• icon：默认0，支持0-2
• options：配置参数，如遮罩、时间等

// 默认
var index = layer.load();
// 定义遮罩
var index = layer.load(0, {shade: [0.3, '#393D49']});
// 关闭弹出层
// layer.close(index);