牛逼的 弹出层 layer ！！！
生活随笔
收集整理的這篇文章主要介紹了
牛逼的 弹出层 layer ！！！
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文出自：http://www.cnblogs.com/jiqing9006/p/5086092.html
?
功能強大，實用，操作方便，文檔齊全。
http://layer.layui.com/api.html
?
常用功能代碼：
<!doctype html> <html><head><meta charset="utf-8"><title>layer-更懂你的web彈窗解決方案</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><script src="layer/layer.js"></script><script src="layer/extend/layer.ext.js"></script> </head><body><script>function func1() {layer.alert('內容');}function func2() {layer.alert('內容', {icon: 1,skin: 'layer-ext-moon' //該皮膚由layer.seaning.com友情擴展。關于皮膚的擴展規則，去這里查閱});}function func3() {//詢問框layer.confirm('您是如何看待前端開發？', {btn: ['重要','奇葩'] //按鈕}, function(){layer.msg('的確很重要', {icon: 1});}, function(){layer.msg('也可以這樣', {time: 2000, //2s后自動關閉btn: ['明白了', '知道了']});});}function func4() {//提示層layer.msg('玩命提示中');}function func5() {//墨綠深藍風layer.alert('墨綠風格，點擊確認看深藍', {skin: 'layui-layer-molv' //樣式類名,closeBtn: 0}, function(){layer.alert('偶吧深藍style', {skin: 'layui-layer-lan',closeBtn: 0,shift: 4 //動畫類型});});}function func6() {//捕獲頁layer.open({type: 1,shade: false,title: false, //不顯示標題content: $('.layer_notice'), //捕獲的元素cancel: function(index){layer.close(index);this.content.show();layer.msg('捕獲就是從頁面已經存在的元素上，包裹layer的結構', {time: 2000, icon:6});}});}function func7() {//頁面層layer.open({type: 1,skin: 'layui-layer-rim', //加上邊框area: ['420px', '240px'], //寬高content: 'html內容'});}function func8() {//自定頁layer.open({type: 1,skin: 'layui-layer-demo', //樣式類名closeBtn: 0, //不顯示關閉按鈕shift: 2,area: ['420px', '240px'], //寬高shadeClose: true, //開啟遮罩關閉content: '內容'});}function func9() {//tips層layer.tips('Hi，我是tips', $("#tips"));}function func10() {//iframe層layer.open({type: 2,title: 'layer mobile頁',shadeClose: true,shade: 0.8,area: ['380px', '90%'],content: 'http://m.baidu.com' //iframe的url}); }function func11() {//iframe窗layer.open({type: 2,title: false,closeBtn: 0, //不顯示關閉按鈕shade: [0],area: ['340px', '215px'],offset: 'auto', //右下角彈出time: 2000, //2秒后自動關閉shift: 2,content: ['test/guodu.html', 'no'], //iframe的url，no代表不顯示滾動條end: function(){ //此處用于演示layer.open({type: 2,title: '百度一下，你就知道',shadeClose: true,shade: false,maxmin: true, //開啟最大化最小化按鈕area: ['1150px', '650px'],content: 'http://www.baidu.com'});}});}function func12() {//加載層var index = layer.load(0, {shade: false}); //0代表加載的風格，支持0-2}function func13() {//loading層var index = layer.load(1, {shade: [0.1,'#fff'] //0.1透明度的白色背景});}function func14() {//小tipslayer.tips('我是另外一個tips，只不過我長得跟之前那位稍有些不一樣。', $('#tips2'), {tips: [1, '#3595CC'],time: 4000});}function func15() {//prompt層layer.prompt({title: '輸入任何口令，并確認',formType: 1 //prompt風格，支持0-2}, function(pass){layer.prompt({title: '隨便寫點啥，并確認', formType: 2}, function(text){layer.msg('演示完畢！您的口令：'+ pass +' 您最后寫下了：'+ text);});});}function func16() {//tab層layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1', content: '內容1'}, {title: 'TAB2', content: '內容2'}, {title: 'TAB3', content: '內容3'}]});}function openpage() {layer.config({extend: 'extend/layer.ext.js'}); //頁面一打開就執行，放入ready是為了layer所需配件（css、擴展模塊）加載完畢layer.ready(function() {//官網歡迎頁layer.open({type: 2,skin: 'layui-layer-lan',title: 'layer彈層組件',fix: false,shadeClose: true,maxmin: true,area: ['1000px', '500px'],content: 'https://www.baidu.com'});layer.msg('歡迎使用layer');}); }</script><div class="layer_notice">hello,i'm layer!</div><button id="func1" οnclick="func1();">初體驗</button><button id="func2" οnclick="func2();">皮膚</button><button id="func3" οnclick="func3();">詢問框</button><button id="func4" οnclick="func4();">提示層</button><button id="func5" οnclick="func5();">藍色風格</button><button id="func6" οnclick="func6();">捕捉頁</button><button id="func7" οnclick="func7();">頁面層</button><button id="func8" οnclick="func8();">自定義</button><button id="func9" οnclick="func9();">tips層</button><button id="func10" οnclick="func10();">iframe層</button><button id="func11" οnclick="func11();">iframe窗</button><button id="func12" οnclick="func12();">加載層</button><button id="func13" οnclick="func13();">loading層</button><button id="func14" οnclick="func14();">小tips</button><button id="func15" οnclick="func15();">prompt層</button><button id="func16" οnclick="func16();">tab層</button><button id="openpage" οnclick="openpage();">openpage</button><button id="tips">tips</button><button id="tips2">tips2</button> </body></html>參數靈活，豐富?？梢宰鳛殚_發項目的公共模塊，多處使用。
案例下載
總結
以上是生活随笔為你收集整理的牛逼的 弹出层 layer ！！！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： selenium 获取最新页面源代码_S
- 下一篇： 【IT之路】Docker拉取镜像查看版本