關於Layer彈出框初探

本文轉載自查看原文 2016-12-10 16:57 1689 HTML+CSS+jQuery+javaScript
　　layer至今仍作為layui的代表作，她的受眾廣泛並非偶然，而是這五年多的堅持，不斷完善和維護、不斷建設和提升社區服務，使得猿們紛紛自發傳播，乃至於成為今天的Layui最強勁的源動力。目前，layer已成為國內最多人使用的web彈層組件，GitHub自然Stars3000+，官網累計下載量達20w+，大概有15萬Web平台正在使用layer。
<html>
    <head>
        <title>彈窗效果</title>
    </head>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="layer/layer.js"></script>
    <style>
        .buttonValue{width:100%;display:inline-block;padding-top:20px;padding-bottom:20px;border-bottom:2px solid #666;}
        .buttonValue li{float:left;min-width:100px;height:50px;margin-left:20px;padding:0 10px;line-height:50px;font-size:16px;text-align:center;border-radius:10px;background-color:#666;color:#fff;cursor:pointer;}
        .buttonValue li:hover{background-color:#f54372;}
        
        //自定義樣式一
        body .demo-class1 .layui-layer-title{background:#c00; color:#fff; border: none;}
        body .demo-class1 .layui-layer-btn{border-top:1px solid #E9E7E7;padding:10px;}
        body .demo-class1 .layui-layer-btn a{background:#333;}
        body .demo-class1 .layui-layer-btn .layui-layer-btn1{background:#999;}

        //自定義樣式二
        body .demo-class2 .layui-layer-title{background:#c00; color:#0f0; border: none;}
        body .demo-class2 .layui-layer-btn{border-top:1px solid #E9E7E7;padding:10px;}
        body .demo-class2 .layui-layer-btn a{background:#333;}
        body .demo-class2 .layui-layer-btn .layui-layer-btn1{background:#666;}
        //加上body是為了保證優先級。你可以借助Chrome調試工具，定義更多樣式控制層更多的區域
    </style>
    <body>
        <ul class="buttonValue type">
            <li rel="1">彈出框</li>
            <li rel="2">彈出框(信息層)</li>
            <li rel="3">彈出框(頁面層)</li>
            <li rel="4">彈出框(iframe層)</li>
            <li rel="5">彈出框(加載層)</li>
            <li rel="6" id="id">彈出框(tips層)</li>
        </ul>
        
        <ul class="buttonValue skin">
            <li rel="1">樣式（自定義全局）</li>
            <li rel="2">樣式（自定義單個）</li>
            <li rel="3">樣式（layui-layer-lan）</li>
            <li rel="4">樣式（layui-layer-molv）</li>
        </ul>
        
        <ul class="buttonValue area">
            <li rel="1">寬高（默認）</li>
            <li rel="2">寬高（自定義）</li>
        </ul>
        
        <ul class="buttonValue offset">
            <li rel="1">坐標（左上）</li>
            <li rel="2">坐標（右上）</li>
            <li rel="3">坐標（左下）</li>
            <li rel="4">坐標（右下）</li>
            <li rel="5">坐標（居中）</li>
            <li rel="6">坐標（任意位置）</li>
        </ul>
        
        <ul class="buttonValue iconMse">
            <li rel="0">消息圖標（提示信息）</li>
            <li rel="1">消息圖標（成功信息-對勾）</li>
            <li rel="2">消息圖標（錯誤信息-叉）</li>
            <li rel="3">消息圖標（確認信息）</li>
            <li rel="4">消息圖標（鎖定信息）</li>
            <li rel="5">消息圖標（失敗信息-笑臉）</li>
            <li rel="6">消息圖標（成功信息-沮喪）</li>
        </ul>
        
        <ul class="buttonValue iconLoad">
            <li rel="1">加載圖標（0）</li>
            <li rel="2">加載圖標（1）</li>
            <li rel="3">加載圖標（2）</li>
        </ul>
        
        <ul class="buttonValue closeBtn">
            <li rel="0">關閉按鈕（0）</li>
            <li rel="1">關閉按鈕（1）</li>
            <li rel="2">關閉按鈕（2）</li>
        </ul>
        
        <ul class="buttonValue shade">
            <li rel="1">遮罩層（默認）</li>
            <li rel="2">遮罩層（0）</li>
            <li rel="3">遮罩層（0.5）</li>
            <li rel="4">遮罩層（0.5，#393D49)</li>
        </ul>
        
        <ul class="buttonValue shadeClose">
            <li rel="false">遮罩層關閉（默認）</li>
            <li rel="true" value="遮罩層必須存在">遮罩層關閉（點擊空白關閉）</li>
        </ul>
        
        <ul class="buttonValue anim">
            <li rel="0">動畫（0）</li>
            <li rel="1">動畫（1）</li>
            <li rel="2">動畫（2）</li>
            <li rel="3">動畫（3）</li>
            <li rel="4">動畫（4）</li>
            <li rel="5">動畫（5）</li>
            <li rel="6">動畫（6）</li>
        </ul>

        <script>
            $(".type li").click(function(){
                var rel = $(this).attr("rel");
                switch(rel){
                    case "1" :
                        layer.open({
                            type:0,
                            title: ['hello Layer', 'font-size:14px;'],
                            content: '傳入任意的文本或html',//這里content是一個普通的String
                            skin: 'layui-layer-lan',//目前layer內置的skin有：layui-layer-lan、layui-layer-molv
                            area: ['500px', '300px'],//遮罩層區域大小
                            shade: 0.5,//遮罩層透明度
                            shadeClose: true,//是否點擊遮罩關閉
                            time: 5000,//自動關閉時間
                            maxmin: true,//最大最小化
                            id: 'popup',//設置該值后，不管是什么類型的層，都只允許同時彈出一個。一般用於頁面層和iframe層模式
                        });
                        break;
                    
                    case "2" :
                        layer.open({
                            type:0,
                            title: '信息層',
                            content: 'type = 0',
                        });
                        break;
                    case "3" :
                        layer.open({
                            type:1,
                            title: '頁面層',
                            content: 'type = 1',
                        });
                        break;
                    case "4" :
                        layer.open({
                            type:2,
                            title: 'iframe層',
                            content: 'http://www.baidu.com' //這里content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://www.baidu.com', 'no'],
                        });
                        break;
                    case "5" :
                        layer.open({
                            type:3,
                            title: '加載層',
                            content: 'type = 3',
                        });
                        break;
                    case "6" :
                        layer.open({
                            type:4,
                            title: 'tips層',
                            content: ['tips層', '#id'] //數組第二項即吸附元素選擇器或者DOM
                        });
                        break;
                }
            });
            
            $(".skin li").click(function(){
                //單個使用
                //layer.open({
                //    skin: 'demo-class2'
                //});
                //全局使用。即所有彈出層都默認采用，但是單個配置skin的優先級更高
                layer.config({
                  skin: 'demo-class1'
                })
                var rel = $(this).attr("rel");
                switch(rel){
                    case "1" :
                        layer.open({
                            type:0,
                            title: 'skin',
                            content: 'demo-class1'
                        });
                        break;
                    case "2" :
                        layer.open({
                            type:0,
                            title: 'skin',
                            content: 'demo-class2',
                            skin: 'demo-class2'
                        });
                        break;
                    case "3" :
                        layer.open({
                            type:0,
                            title: 'skin',
                            content: 'layui-layer-lan',
                            skin: 'layui-layer-lan'//目前layer內置的skin有：layui-layer-lan、layui-layer-molv
                        });
                        break;
                    case "4" :
                        layer.open({
                            type:0,
                            title: 'skin',
                            content: 'layui-layer-molv',
                            skin: 'layui-layer-molv'//目前layer內置的skin有：layui-layer-lan、layui-layer-molv
                        });
                        break;
                }
            });
            
            $(".area li").click(function(){
                var rel = $(this).attr("rel");
                switch(rel){
                    case "1" :
                        layer.open({
                            type:0,
                            title: 'area',
                            content: 'auto'
                        });
                        break;
                    case "2" :
                        layer.open({
                            type:0,
                            title: 'area',
                            content: '500px 300px',
                            area: ['500px', '300px']
                        });
                        break;
                }
            });
            
            $(".offset li").click(function(){
                var rel = $(this).attr("rel");
                switch(rel){
                    case "1" :
                        layer.open({
                            type:0,
                            title: 'offset',
                            content: '左上',
                            offset:'lt'
                        });
                        break;
                    case "2" :
                        layer.open({
                            type:0,
                            title: 'offset',
                            content: '右上',
                            offset:'rt'
                        });
                        break;
                    case "3" :
                        layer.open({
                            type:0,
                            title: 'offset',
                            content: '左下',
                            offset:'lb'
                        });
                        break;
                    case "4" :
                        layer.open({
                            type:0,
                            title: 'offset',
                            content: '右下',
                            offset:'rb'
                        });
                        break;
                    case "5" :
                        layer.open({
                            type:0,
                            title: 'offset',
                            content: '居中'
                        });
                        break;
                    case "6" :
                        layer.open({
                            type:0,
                            title: 'offset',
                            content: 'auto',
                            offset:['100px','100px']
                        });
                        break;
                }
            });
            
            $(".iconMse li").click(function(){
                var rel = $(this).attr("rel");
                layer.open({
                    type: 0,
                    title: 'icon',
                    content: '信息框:'+rel,
                    icon: parseInt(rel)
                });
            });
            
            $(".iconLoad li").click(function(){
                var rel = $(this).attr("rel");
                layer.open({
                    type: 3,
                    icon: parseInt(rel)
                });
            });
            
            $(".closeBtn li").click(function(){
                var rel = $(this).attr("rel");
                layer.open({
                    type: 0,
                    title: 'closeBtn',
                    content: '關閉按鈕',
                    closeBtn: parseInt(rel)
                });
            });
            
            $(".shade li").click(function(){
                var rel = $(this).attr("rel");
                switch(rel){
                    case "1" :
                        layer.open({
                            type:0,
                            title: 'offset',
                            content: '遮罩層auto'
                        });
                        break;
                    case "2" :
                        layer.open({
                            type:0,
                            title: 'offset',
                            content: '遮罩層0',
                            shade:0
                        });
                        break;
                    case "3" :
                        layer.open({
                            type:0,
                            title: 'offset',
                            content: '遮罩層0.5',
                            shade:0.5
                        });
                        break;
                    case "4" :
                        layer.open({
                            type:0,
                            title: 'offset',
                            content: '遮罩層[0.8, #393D49]',
                            shade:[0.8, '#393D49']
                        });
                        break;
                }
            });
            
            $(".shadeClose li").click(function(){
                var rel = $(this).attr("rel");
                var b = false;
                if(rel == "true"){
                    b = true;
                }
                layer.open({
                    type: 0,
                    title: 'shadeClose',
                    content: '關閉按鈕'+rel,
                    shadeClose: b,
                    shade:0.5
                });
            });
            
            $(".anim li").click(function(){
                var rel = $(this).attr("rel");
                layer.open({
                    type: 0,
                    title: 'anim',
                    content: '彈出框出現動畫'+rel,
                    anim: parseInt(rel)
                });
            });
        </script>
    </body>
</html>
　　源碼下載地址：http://pan.baidu.com/s/1c2iOmK4 提取碼：39zm
免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
猜您在找 layer彈出框小結 layer彈出框基本使用 layer + ajax 彈出框 layer彈出框的定位 layer ifram 彈出框 jquery的Layer彈出框操作 layer彈出框包含頁面彈出框layer的使用封裝 jQuery layer[頁面彈出框] 彈出框插件layer使用