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