1. 程式人生 > >[Layer] layui的彈出層用法記錄

[Layer] layui的彈出層用法記錄

為了更方便自己的使用和查詢,把常用的程式碼記錄一下,省的老去翻文件了。

通用載入提示:

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: ['明白了', '知道了']
            });
        });

    }