1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="layui-v2.4.3/layui-v2.4.3/layui/css/layui.css"> 7 <script type="text/javascript" src="layui-v2.4.3/layui-v2.4.3/layui/layui.js"></script> 8 </head> 9 <body> 10 <button class="layui-btn" id="btn1">點擊按鈕彈窗</button> 11 <button class="layui-btn" id="btn2">alert彈窗</button> 12 <button class="layui-btn" id="btn3">confirm彈窗</button> 13 <button class="layui-btn" id="btn4">open-type=0[默認]</button> 14 <button class="layui-btn" id="btn5">open-type=1[頁面層]</button> 15 <button class="layui-btn" id="btn6">open-type=2[iframe層]</button> 16 <button class="layui-btn" id="btn7">open-type=4[tips層]</button> 17 <button class="layui-btn" id="btn8">[tips層]</button> 18 </body> 19 <div id="content" style="background-color: #00bfbf;height: 100%;width: 100%;display: none">type=2的open彈出層</div> 20 <script> 21 layui.use(['layer','jquery'],function () { 22 // 定義使用jquery和layer 23 var $ = layui.jquery; 24 var layer = layui.layer; 25 // 彈窗 26 $("#btn1").click(function () { 27 layer.msg("彈出層",{icon:1}); 28 }) 29 $("#btn2").click(function () { 30 // 普通彈出層 31 // layer.alert("alert 彈出層"); 32 // 彈出帶圖標的 33 layer.alert("帶圖標的alert彈出層",{icon:4}); 34 }) 35 $("#btn3").click(function () { 36 layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){ 37 // 這裏能夠寫點擊肯定之後的回調方法好比: 38 // alert("這是點擊肯定之後的回調方法" ); 39 // 或者直接跟layui的彈窗 40 layer.msg("這是點擊肯定之後的回調方法",{icon:1}); 41 layer.close(index);//關閉彈窗 42 }); 43 }) 44 // open核心方法彈出層 45 // type 類型爲0 46 $("#btn4").click(function () { 47 layer.open({ 48 type:0, 49 // content:"默認彈出信息框[type=0]" 50 // 除了默認文字提示之外還能夠跟html代碼如: 51 content:"<p style='color: red'>默認彈出層樣式</p>", 52 // 還能夠添加圖標屬性 53 icon:1, 54 // title爲標題屬性 55 title:"標題屬性", 56 // skin爲彈出層的樣式皮膚如: 57 skin:"layui-layer-lan", 58 // area爲彈出層的寬高屬性 59 area:['300px','200px'], 60 // 設置座標用offset屬性['top','left'] auto 爲默認垂直水平居中 r爲靠右 l爲靠左 t靠頂部 b靠下(規則爲:先左右後上下) 61 offset:['200px','100px'], 62 // offset:'rt', 63 // 關閉按鈕樣式 64 closeBtn:1,//0爲不顯示,1默認,2帶有樣式 65 // shade爲彈出層的遮罩屬性shade['透明度','顏色'] 66 shade:['0.1','black'], 67 // 點擊遮罩層關閉彈出層屬性true爲是false爲否 68 shadeClose:true, 69 // time爲延時關閉0爲不關閉,後面能夠跟毫秒數 70 time:'2000', 71 // anim爲動畫屬性後面跟屬性1,2,3,4 72 // anim: 0 平滑放大。默認 73 // anim: 1 從上掉落 74 // anim: 2 從最底部往上滑入 75 // anim: 3 從左滑入 76 // anim: 4 從左翻滾 77 // anim: 5 漸顯 78 // anim: 6 抖動 79 anim:'6', 80 // 顯示窗口最大化最小化;其對應的彈出層type值爲1,2有效 81 // maxmin:true, 82 }) 83 }) 84 // type類型爲1 85 $("#btn5").click(function () { 86 layer.open({ 87 type:1, 88 // type爲1能夠使用選擇器必須將內容層寫到body外面;type爲0只能使用字符安拼接的標籤如: 89 content:$("#content"), 90 area:["300px","300px"], 91 maxmin:true, 92 // time:2000, 93 // 按鈕btn屬性做爲彈出層的按鈕;從而去觸發另外一個事件 94 btn:['肯定','重置','取消'], 95 // 按鈕居中用btnalign其值爲c(居中),l(居左),r(居右) 96 // btnAlign:'c', 97 // 爲按鈕綁定事件 98 // 按鈕一綁定事件方法以下: 99 yes: function(index, layero){ 100 layer.msg("按鈕肯定的回調"); 101 }, 102 // 按扭二的回調 103 // 按鈕三和按鈕二用一樣的方法,綁定事件以此類推 104 btn2: function(index, layero){ 105 layer.msg("按鈕重置的回調方法") 106 }, 107 btn3: function(index, layero){ 108 layer.msg("按鈕取消的回調方法") 109 // 當return false 時點擊按鈕就不會關閉彈出層 110 return false 111 }, 112 // 右上角x按鈕關閉的回調 113 cancel: function(){ 114 //右上角關閉回調 115 layer.msg("右上角關閉按鈕的回調") 116 //return false// 開啓該代碼可禁止點擊該按鈕關閉 117 } 118 }) 119 }) 120 // type爲2的open核心彈出層(iframe彈出層) 121 $("#btn6").click(function () { 122 layer.open({ 123 // 當type爲2的時候content必須爲url 124 type:2, 125 // content:'layer.tanchuang.html', 126 // content除了內部連接之外也能夠使用外部連接如: 127 content:"http://www.baidu.com", 128 // 若是想去除滾動條能夠使用這種樣式 129 // content:["http://www.baidu.com",'no'], 130 area:['1200px','500px'], 131 }) 132 }) 133 // type爲3的open核心彈出層 134 // tips類型爲吸附層多用於教學提示 135 $("#btn7").click(function () { 136 layer.open({ 137 type:4, 138 content:["這是type=4的tips彈出層樣式","#btn7"], 139 shadeClose:true, 140 // tips是屬性爲吸附層內容顯示在元素的位置;如tips:1在元素下面 141 tips:1, 142 }) 143 }) 144 // 如下也是一種吸附層的彈出 145 $("#btn8").click(function(){ 146 layer.tips('只想提示地精準些', '#btn8'); 147 }) 148 }); 149 </script> 150 </html>