layer是一款備受青睞的web彈層組件，layer兼容了包括IE6在內的所有主流瀏覽器。layer遵循LGPL協議，將永久性提供無償服務。特別說明：事件需自己綁定，以下只展現調用代碼，頁面需引入layer.min.js。//初體驗 layer.alert('內容')//第三方擴展皮膚 layer.alert('內容', {icon: 1,skin: 'layer-ext-moon' //該皮膚由layer.seaning.com友情擴展。關于皮膚的擴展規則， })//詢問框 layer.confirm('您是如何看待前端開發？', {btn: ['重要','奇葩'] //按鈕 }, function(){layer.msg('的確很重要', {icon: 1}); }, function(){layer.msg('也可以這樣', {time: 20000, //20s后自動關閉btn: ['明白了', '知道了']}); });//提示層 layer.msg('玩命提示中');//墨綠深藍風 layer.alert('墨綠風格，點擊確認看深藍', {skin: 'layui-layer-molv' //樣式類名,closeBtn: 0 }, function(){layer.alert('偶吧深藍style', {skin: 'layui-layer-lan',closeBtn: 0,shift: 4 //動畫類型}); });//捕獲頁 layer.open({type: 1,shade: false,title: false, //不顯示標題content: $('.layer_notice'), //捕獲的元素cancel: function(index){layer.close(index);this.content.show();layer.msg('捕獲就是從頁面已經存在的元素上，包裹layer的結構', {time: 5000, icon:6});} });//頁面層 layer.open({type: 1,skin: 'layui-layer-rim', //加上邊框area: ['420px', '240px'], //寬高content: 'html內容' });//自定頁 layer.open({type: 1,skin: 'layui-layer-demo', //樣式類名closeBtn: 0, //不顯示關閉按鈕shift: 2,shadeClose: true, //開啟遮罩關閉content: '內容' });//tips層 layer.tips('Hi，我是tips', '吸附元素選擇器，如#id');//iframe層 layer.open({type: 2,title: 'layer mobile頁',shadeClose: true,shade: 0.8,area: ['380px', '90%'],content: 'http://layer.layui.com/mobile/' //iframe的url }); //iframe窗 layer.open({type: 2,title: false,closeBtn: 0, //不顯示關閉按鈕shade: [0],area: ['340px', '215px'],offset: 'rb', //右下角彈出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: ['893px', '600px'],content: 'http://fly.layui.com/'});} });//加載層 var index = layer.load(0, {shade: false}); //0代表加載的風格，支持0-2//loading層 var index = layer.load(1, {shade: [0.1,'#fff'] //0.1透明度的白色背景 });//小tips layer.tips('我是另外一個tips，只不過我長得跟之前那位稍有些不一樣。', '吸附元素選擇器', {tips: [1, '#3595CC'],time: 4000 });//prompt層 layer.prompt({title: '輸入任何口令，并確認',formType: 1 //prompt風格，支持0-2 }, function(pass){layer.prompt({title: '隨便寫點啥，并確認', formType: 2}, function(text){layer.msg('演示完畢！您的口令：'+ pass +' 您最后寫下了：'+ text);}); });//tab層 layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1', content: '內容1'}, {title: 'TAB2', content: '內容2'}, {title: 'TAB3', content: '內容3'}] });//相冊層 $.getJSON('test/photos.json?v='+new Date, function(json){layer.photos({photos: json //格式見API文檔手冊頁}); });參考網址：http://layer.layui.com/

總結

以上是生活随笔為你收集整理的JQuery-layer web弹窗层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。