[Layer] layui的彈出層用法記錄
阿新 • • 發佈:2019-01-01
為了更方便自己的使用和查詢,把常用的程式碼記錄一下,省的老去翻文件了。
通用載入提示:
layer.msg('載入中...',{icon: 16,time:false,shade:0.6});
layer.load(2, { shade: false });
完成提示加關閉當前layer
更多layer.alert('儲存成功!', { icon: 1 }, function () { var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); });
//基礎提示 document.getElementById('Button1').onclick = function () { layer.msg('玩命提示中'); } //載入中 document.getElementById('Button2').onclick = function () { var index = layer.load(0, { shade: false }); //0代表載入的風格,支援0-2 setTimeout(function () { layer.closeAll('loading');//關閉載入 }, 2000); } //右下角iframe彈窗 document.getElementById('Button3').onclick = function () { layer.open({ type: 2, closeBtn: 1, //關閉按鈕顯示 title: "提示!", //標題 shade: [0], area: ['340px', '215px'], offset: 'rb', //右下角彈出 time: 5000, //自動關閉時間 anim: 2, content: ['HtmlPage2.html', 'no'], //iframe的url,no代表不顯示滾動條 end: function () { //關閉後回撥函式 alert('aaa'); } }); } //好牛逼的iframe彈窗 document.getElementById('Button4').onclick = function () { // layer.open({ // type: 2, // title: '標題標題', // shadeClose: true, // shade: false, // maxmin: true, //開啟最大化最小化按鈕 // area: ['893px', '600px'], // content: 'HtmlPage2.html' // }); layer.open({ type: 2, title: '檢視詳情', shadeClose: false, shade: [0.3, '#393D49'], maxmin: false, area: ['893px', '550px'], content: 'stu/other/stuScoringDetails'//這裡需要公告檢視子頁面,傳id在彈窗開啟 }); } //位置提示tips document.getElementById('Button5').onmouseover = function () { layer.tips('這裡是一些內容提示!', '#Button5', { tips: [1, '#76d4f5'], time: 4000 }); } //基礎alert document.getElementById('Button6').onclick = function () { layer.alert('提示內容', { icon: 1 ,title: '資訊'}) } //基礎confirm document.getElementById('Button7').onclick = function () { layer.confirm('您是如何看待前端開發?', { btn: ['確定', '取消'] //按鈕 }, function () { //確定按鈕回撥 //更好看的提示 layer.msg('的確很重要', { icon: 1 }); }, function () { //取消按鈕回撥 layer.msg('也可以這樣', { time: 20000, //20s後自動關閉 btn: ['明白了', '知道了'] }); }); }