官方：https://www.layui.com/doc/modules/layer.html
源碼：https://github.com/xiaostudy/web_sample
效果
目錄結構
代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../js/jquery-3.3.1.js"></script> 7 <script src="../js/layer/layer.js"></script> 8 9 <script type="text/javascript"> 10 function msg1() { 11 layer.msg("msg彈窗,默認停留3秒"); 12 } 13 14 function msg2() { 15 layer.msg("msg彈窗,停留2秒", {time: 2000}); 16 } 17 18 function msg3() { 19 layer.msg("msg彈窗,不關閉", {time: -1}); 20 } 21 22 function msg4() { 23 layer.msg("msg彈窗,圖標", {icon: 6, time: 2000});//1打鈎,2打叉,3問號,4鎖定,5難過臉,6微笑臉,7-15感嘆號,16加載,17以上估計全是感嘆號 24 } 25 26 function msg5() { 27 layer.msg("msg彈窗,起始位置", {offset:['50px', '50px'],time: 2000});//x縱向,y橫向 28 } 29 30 function msg6() { 31 layer.msg("msg彈窗, 更改背景,背景不可點擊", {time: 2000, shade : [0.5 , '#000' , true]}); 32 } 33 34 function msg7() { 35 layer.msg("msg彈窗, 回調函數", {time: 2000,},function(){ 36 reload(); 37 }); 38 } 39 40 function reload() {//回調函數 41 layer.msg("回調函數執行！"); 42 } 43 44 function load1() { 45 var index = layer.load(); 46 layer.close(index);//不加關閉一直處於加載狀態 47 } 48 49 function load2() { 50 var index = layer.load(1); 51 layer.close(index);//不加關閉一直處於加載狀態 52 } 53 54 function load3() { 55 layer.load(2,{time: 2*1000}); 56 } 57 58 function tips1() { 59 layer.tips('只想提示地精准些', '#tips1'); 60 } 61 62 function tips2() { 63 layer.tips('在上面', '#tips2', { 64 tips: 1//1在上面，2在右邊，3在下面，4在左邊 65 }); 66 } 67 68 function open1(){ 69 var index = layer.open({ 70 // time: 2*1000,//2秒后不點擊關閉也自動關閉 71 type: 1,//0：信息框，默認 1：頁面層 2：iframe層 3：加載層 4：tips層 72 area: ['600px', '360px'],//固定長寬 73 shadeClose: false, //點擊遮罩關閉 74 content: '\<\div style="padding:20px;">open彈窗\<\/div>' 75 // content: 'open彈窗' 76 }); 77 // layer.close(index);//不加關閉一直處於等待點擊關閉 78 } 79 80 function open2(){ 81 layer.open({ 82 title:'test', 83 type: 1, 84 area: ['600px', '360px'],//固定長寬 85 /*https://www.layui.com/doc/modules/layer.html#btn*/ 86 btn:['確定', '取消'],//第一個按鈕是yes，第二個按鈕是btn2，以此類推 87 style:'color:#666;', 88 content: '\<\div style="padding:20px;">跳轉到layer.msg\<\/div>', 89 yes: function(index, layero){//第一個按鈕 90 location.href='https://www.layui.com/doc/modules/layer.html#layer.msg'; 91 }, 92 btn2: function (index, layero) {//第二個按鈕 93 layer.msg("點擊取消關閉"); 94 // return false; //開啟該代碼可禁止點擊該按鈕關閉 95 }, 96 cancel: function(){//右上角關閉回調 97 layer.msg("點擊右上角關閉"); 98 // return false;//開啟該代碼可禁止點擊該按鈕關閉 99 } 100 }); 101 } 102 </script> 103 </head> 104 <body style="text-align: center"> 105 <h1>layer演示</h1> 106 <div> 107 <div> 108 <h2>提示框msg</h2> 109 <a href="https://www.layui.com/doc/modules/layer.html#layer.msg">msg的官方講解</a> 110 <br><br> 111 <div> 112 <input type="button" value="msg彈窗,默認停留3秒" onclick="msg1()" /> 113 </div> 114 <div> 115 <input type="button" value="msg彈窗,停留2秒" onclick="msg2()" /> 116 </div> 117 <div> 118 <input type="button" value="msg彈窗,不關閉" onclick="msg3()" /> 119 </div> 120 <div> 121 <input type="button" value="msg彈窗,圖標" onclick="msg4()" /> 122 </div> 123 <div> 124 <input type="button" value="msg彈窗,起始位置" onclick="msg5()" /> 125 </div> 126 <div> 127 <input type="button" value="msg彈窗,更改背景后,背景不可點擊" onclick="msg6()" /> 128 </div> 129 <div> 130 <input type="button" value="msg彈窗,回調函數" onclick="msg7()" /> 131 </div> 132 </div> 133 <hr> 134 <div> 135 <h2>加載層load</h2> 136 <a href="https://www.layui.com/doc/modules/layer.html#layer.load">load的官方講解</a> 137 <br><br> 138 <div> 139 <input type="button" value="load彈窗,默認" onclick="load1()" /> 140 </div> 141 <div> 142 <input type="button" value="load彈窗,1" onclick="load2()" /> 143 </div> 144 <div> 145 <input type="button" value="load彈窗,指定等待2秒" onclick="load3()" /> 146 </div> 147 </div> 148 <hr> 149 <div> 150 <h2>tips</h2> 151 <a href="https://www.layui.com/doc/modules/layer.html#layer.tips">tips的官方講解</a> 152 <br><br> 153 <div> 154 <input type="button" value="tips彈窗,在下面測試旁邊" onclick="tips1()" /> 155 </div> 156 <span id="tips1"> 157 測試 158 </span> 159 <div> 160 <input type="button" value="tips彈窗,在上面" onclick="tips2()" /> 161 </div> 162 <span id="tips2"> 163 測試 164 </span> 165 </div> 166 <hr> 167 <div> 168 <h2>open</h2> 169 <a href="https://www.layui.com/doc/modules/layer.html#layer.open">open的官方講解</a> 170 <br><br> 171 <div> 172 <input type="button" value="open彈窗" onclick="open1()" /> 173 </div> 174 <div> 175 <input type="button" value="open彈窗,2" onclick="open2()" /> 176 </div> 177 </div> 178 </div> 179 180 </body> 181 </html>