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