<!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>