1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <title>layui中的layer</title> 8 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 9 <script type="text/javascript" src="layer-v3.0.3/layer/layer.js"></script> 10 </head> 11 12 <body> 13 14 <button id="func1" onclick="func1();">初体验</button> 15 <button id="func2" onclick="func2();">皮肤</button> 16 <button id="func3" onclick="func3();">询问框</button> 17 <button id="func4" onclick="func4();">提示层</button> 18 <button id="func5" onclick="func5();">蓝色风格</button> 19 <button id="func6" onclick="func6();">捕捉页</button> 20 <button id="func7" onclick="func7();">页面层</button> 21 <button id="func8" onclick="func8();">自定义</button> 22 <button id="func9" onclick="func9();">tips层</button> 23 <button id="func10" onclick="func10();">iframe层</button> 24 <button id="func11" onclick="func11();">iframe窗</button> 25 <button id="func12" onclick="func12();">加载层</button> 26 <button id="func13" onclick="func13();">loading层</button> 27 <button id="func14" onclick="func14();">小tips</button> 28 <button id="func15" onclick="func15();">prompt层</button> 29 <button id="func16" onclick="func16();">tab层</button> 30 <button id="openpage" onclick="openpage();">openpage</button> 31 32 33 </body> 34 <script type="text/javascript"> 35 function func1() { 36 layer.alert('内容'); 37 } 38 39 function func2() { 40 layer.alert('内容', { 41 icon: 1, 42 skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅 43 }); 44 } 45 46 function func3() { 47 //询问框 48 layer.confirm('您是如何看待前端开发？', { 49 btn: ['重要', '奇葩'] //按钮 50 }, function() { 51 layer.msg('的确很重要', { 52 icon: 1 53 }); 54 }, function() { 55 layer.msg('也可以这样', { 56 time: 2000, //2s后自动关闭 57 btn: ['明白了', '知道了'] 58 }); 59 }); 60 } 61 62 function func4() { 63 //提示层 64 layer.msg('玩命提示中'); 65 } 66 67 function func5() { 68 //墨绿深蓝风 69 layer.alert('墨绿风格，点击确认看深蓝', { 70 skin: 'layui-layer-molv' //样式类名 71 , 72 closeBtn: 0 73 }, function() { 74 layer.alert('偶吧深蓝style', { 75 skin: 'layui-layer-lan', 76 closeBtn: 0, 77 shift: 4 //动画类型 78 }); 79 }); 80 } 81 82 function func6() { 83 //捕获页 84 layer.open({ 85 type: 1, 86 shade: false, 87 title: false, //不显示标题 88 content: $('.layer_notice'), //捕获的元素 89 cancel: function(index) { 90 layer.close(index); 91 this.content.show(); 92 layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { 93 time: 2000, 94 icon: 6 95 }); 96 } 97 }); 98 } 99 100 function func7() { 101 //页面层 102 layer.open({ 103 type: 1, 104 skin: 'layui-layer-rim', //加上边框 105 area: ['420px', '240px'], //宽高 106 content: 'html内容' 107 }); 108 } 109 110 function func8() { 111 //自定页 112 layer.open({ 113 type: 1, 114 skin: 'layui-layer-demo', //样式类名 115 closeBtn: 0, //不显示关闭按钮 116 shift: 2, 117 area: ['420px', '240px'], //宽高 118 shadeClose: true, //开启遮罩关闭 119 content: '内容' 120 }); 121 } 122 123 function func9() { 124 //tips层 125 layer.tips('Hi，我是tips', $("#tips")); 126 } 127 128 function func10() { 129 //iframe层 130 layer.open({ 131 type: 2, 132 title: 'layer mobile页', 133 shadeClose: true, 134 shade: 0.8, 135 area: ['380px', '90%'], 136 content: 'http://m.baidu.com' //iframe的url 137 }); 138 } 139 140 function func11() { 141 //iframe窗 142 layer.open({ 143 type: 2, 144 title: false, 145 closeBtn: 0, //不显示关闭按钮 146 shade: [0], 147 area: ['340px', '215px'], 148 offset: 'auto', //右下角弹出 149 time: 2000, //2秒后自动关闭 150 shift: 2, 151 content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条 152 end: function() { //此处用于演示 153 layer.open({ 154 type: 2, 155 title: '百度一下，你就知道', 156 shadeClose: true, 157 shade: false, 158 maxmin: true, //开启最大化最小化按钮 159 area: ['1150px', '650px'], 160 content: 'http://www.baidu.com' 161 }); 162 } 163 }); 164 } 165 166 function func12() { 167 //加载层 168 var index = layer.load(0, { 169 shade: false 170 }); //0代表加载的风格，支持0-2 171 } 172 173 function func13() { 174 //loading层 175 var index = layer.load(1, { 176 shade: [0.1, '#fff'] //0.1透明度的白色背景 177 }); 178 } 179 180 function func14() { 181 //小tips 182 layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', $('#tips2'), { 183 tips: [1, '#3595CC'], 184 time: 4000 185 }); 186 } 187 188 function func15() { 189 190 //prompt层 191 layer.prompt({ 192 title: '输入任何口令，并确认', 193 formType: 1 //prompt风格，支持0-2 194 }, function(pass) { 195 layer.prompt({ 196 title: '随便写点啥，并确认', 197 formType: 2 198 }, function(text) { 199 layer.msg('演示完毕！您的口令：' + pass + ' 您最后写下了：' + text); 200 }); 201 }); 202 } 203 204 function func16() { 205 //tab层 206 layer.tab({ 207 area: ['600px', '300px'], 208 tab: [{ 209 title: 'TAB1', 210 content: '内容1' 211 }, { 212 title: 'TAB2', 213 content: '内容2' 214 }, { 215 title: 'TAB3', 216 content: '内容3' 217 }] 218 }); 219 } 220 221 function openpage() { 222 layer.config({ 223 extend: 'extend/layer.ext.js' 224 }); 225 //页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕 226 layer.ready(function() { 227 //官网欢迎页 228 layer.open({ 229 type: 2, 230 skin: 'layui-layer-lan', 231 title: 'layer弹层组件', 232 fix: false, 233 shadeClose: true, 234 maxmin: true, 235 area: ['1000px', '500px'], 236 content: 'https://www.baidu.com' 237 }); 238 layer.msg('欢迎使用layer'); 239 }); 240 } 241 </script> 242 243 </html>