layer至今仍作為layui的代表作，她的受眾廣泛並非偶然，而是這五年多的堅持，不斷完善和維護、不斷建設和提升社區服務，使得猿們紛紛自發傳播，乃至於成為今天的Layui最強勁的源動力。目前，layer已成為國內最多人使用的web彈層組件，GitHub自然Stars3000+，官網累計下載量達20w ...
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 "
