摘要：
layer 至今仍作为 layui 的代表作，它的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 W... layer 至今仍作为 layui 的代表作，它的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer 已然成为网页弹出层的首选交互方案，几乎随处可见。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="/css/layui.css">
</head>
<script type="text/javascript" src="layui/layui.all.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- * 从官网下载的layui包中解压后内容如下
* ├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件
* 这里要十分注意的是，我们测试的代码中引入layui的js要引入 layui.all.js，否则某些功能会无效-->
<body>
<!-- 你的HTML代码 -->
<div>
aa
</div>
<button id="start" data-method="setTop" class="layui-btn">显示弹出层</button>
<script>
$(function(){
//打开弹窗
$("#start").on("click",function(){
f5();
});
});
//单个确认按钮（常用）
function f7(){
layer.alert("aa");
}
//确认、取消按钮（常用）
function f6(){
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
//do something
alert("aa")
layer.close(index);
});
}
//自动消失提示（常用）
function f7(){
layer.msg("aa");
}
//单个按钮
function f5(){
layer.open({
content: 'test'
,btn: ['按钮一']
});
}
//下面仅供参考
//多个确认按钮
function f2(){
layer.confirm('纳尼？', {
btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
,
btn3: function(index, layero) {
//按钮【按钮三】的回调
}
}, function(index, layero) {
//按钮【按钮一】的回调
}, function(index) {
//按钮【按钮二】的回调
});
}
//多个确认按钮
function f3(){
layer.open({
content: 'test'
,btn: ['按钮一', '按钮二', '按钮三']
,yes: function(index, layero){
//按钮【按钮一】的回调
alert(1);
layer.close(index);
}
,btn2: function(index, layero){
//按钮【按钮二】的回调
alert(2);
//return false 开启该代码可禁止点击该按钮关闭
}
,btn3: function(index, layero){
//按钮【按钮三】的回调
alert(3);
//return false 开启该代码可禁止点击该按钮关闭
}
,cancel: function(){
//右上角关闭回调
//return false 开启该代码可禁止点击该按钮关闭
}
});
}
//多个确认按钮
function f4(){
layer.open({
content: 'test'
,btn: ['确定', '取消']
,yes: function(index, layero){
//确定的回调
alert(1);
layer.close(index);
return 1;
}
,btn2: function(index, layero){
//取消的回调
alert(2);
return 2;
//return false 开启该代码可禁止点击该按钮关闭
}
,cancel: function(){
//右上角关闭回调
// return false //开启该代码可禁止点击该按钮关闭
}
});
}
</script>
</html>
