jQuery插件使用总结五：layer 弹框

一、介绍

layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。
在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer（已被10695708人次关注）。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。（介绍源自layer官网）

二、下载&引用

下载地址：http://layer.layui.com/

这里我们做演示只引入layer.js ，大家可根据自己的需求引入相关文件

三、layer 使用

1、alert 弹窗
html：

<button id="btnAlert">alert</button>

js：

	$('#btnAlert').click(() => {
         layer.alert('这是alert弹窗');
    })

2、confirm
html:

<button id="btnConfirm">confirm</button>

js:

$('#btnConfirm').click( () => {
	layer.confirm('你确定吗？');
})

3、msg
html:

<button id="btnMsg">msg</button>

js:

$('#btnMsg').click(() => {
	layer.msg('hello world');
})

4、tips
html:

<button id="btnTips">tips</button>

js;

$('#btnTips').click(() => {
	layer.tips('这是小贴士',"#btnTips");
})

5、load
html:

<button id="btnLoad">load</button>

js:

$('#btnLoad').click(() => {
	layer.load();
})

6、自定义弹框
html：

<button id="btnOpen">自定义弹框</button>

js：

$('#btnOpen').click(() => {
    layer.open({
        title: '注册',//弹框title
        area: ['500px','400px'],//设置宽高
        shadeClose: true,//点击后面的遮罩层关闭弹框
		content:'这是内容',//弹框内容
	});
})

注意：里面的content可是是一个DOM，也可以是字符串，网页地址等，根据自身情况选择。

例如打开一个页面：

		$('#btnOpen').click(() => {
            layer.open({
               type: 2,
                title: '百度',
                area: ['1300px','700px'],
                content: 'http://www.baidu.com',
                shadeClose:true
            });
        })

以上就是layer的一些常用演示，更多功能请参考官方文档：https://www.layui.com/doc/modules/layer.html