1、、基礎參數
? 我們提到的基礎參數主要指調用方法時用到的配置項，如：layer.open({content: ''})layer.msg('', {time: 3})等，其中的content和time即是基礎參數，以鍵值形式存在，基礎參數可合理應用于任何層類型中，您不需要所有都去配置，大多數都是可選的。而其中的layer.open、layer.msg就是內置方法。注意，從2.3開始，無需通過layer.config來加載拓展模塊
（1）、type - 基本層類型

? 類型：Number，默認：0

? layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）。若你采用layer.open({type: 1})方式調用，則type為必填項（信息框除外）

（2）、title - 標題
? 類型：String/Array/Boolean，默認：'信息'
? title支持三種類型的值，若你傳入的是普通的字符串，如title :'我是標題'，那么只會改變標題文本；若你還需要自定義標題區域樣式，那么你可以title: ['文本', 'font-size:18px;']，數組第二項可以寫任意css樣式；如果你不想顯示標題欄，你可以title: false
（3）、content - 內容
類型：String/DOM/Array，默認：''

content可傳入的值是靈活多變的，不僅可以傳入普通的html內容，還可以指定DOM，更可以隨著type的不同而不同。譬如：

/!*如果是頁面層*/ layer.open({type: 1, content: '傳入任意的文本或html' //這里content是一個普通的String }); layer.open({type: 1,content: $('#id') //這里content是一個DOM }); //Ajax獲取 $.post('url', {}, function(str){layer.open({type: 1,content: str //注意，如果str是object，那么需要字符拼接。}); }); /!*如果是iframe層*/ layer.open({type: 2, content: 'http://sentsin.com' //這里content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no'] }); /!*如果是用layer.open執行tips層*/ layer.open({type: 4,content: ['內容', '#id'] //數組第二項即吸附元素選擇器或者DOM }); （4）、skin - 樣式類名
? 類型：String，默認：''
? skin不僅允許你傳入layer內置的樣式class名，還可以傳入您自定義的class名。這是一個很好的切入點，意味著你可以借助skin輕松完成不同的風格定制。目前layer內置的skin有：layui-layer-lan、layui-layer-molv，未來我們還會選擇性地內置更多，但更推薦您自己來定義。

（5）、area - 寬高
? 類型：String/Array，默認：'auto'
? 在默認狀態下，layer是寬高都自適應的，但當你只想定義寬度時，你可以area: '500px'，高度仍然是自適應的。當你寬高都要定義時，你可以area: ['500px', '300px']
（6）、offset - 坐標
? 類型：String/Array，默認：垂直水平居中
? offset默認情況下不用設置。但如果你不想垂直水平居中，你還可以進行以下賦值：

（7）、icon - 圖標。信息框和加載層的私有參數
? 類型：Number，默認：-1（信息框）/0（加載層）
? 信息框默認不顯示圖標。當你想顯示圖標時，默認皮膚可以傳入0-6，如果是加載層，可以傳入0-2。

（8）、btn - 按鈕

? 類型：String/Array，默認：'確認'
? 信息框模式時，btn默認是一個確認按鈕，其它層類型則默認不顯示，加載層和tips層則無效。當您只想自定義一個按鈕時，你可以btn: '我知道了'，當你要定義兩個按鈕時，你可以btn: ['yes', 'no']。當然，你也可以定義更多按鈕，比如：btn: ['按鈕1', '按鈕2', '按鈕3', …]，按鈕1和按鈕2的回調分別是yes和cancel，而從按鈕3開始，則回調為btn3: function(){}，以此類推。

（9）、btnAlign - 按鈕排列
? 類型：String，默認：r
? 你可以快捷定義按鈕的排列位置，btnAlign的默認值為r，即右對齊。btnAlign: 'l'，按鈕左對齊；btnAlign: 'c'，按鈕居中對齊。

（10）、closeBtn - 關閉按鈕
? 類型：String/Boolean，默認：1
? layer提供了兩種風格的關閉按鈕，可通過配置1和2來展示，如果不顯示，則closeBtn: 0
（11）、shade - 遮罩
? 類型：String/Array/Boolean，默認：0.3
? 即彈層外區域。默認是0.3透明度的黑色背景（'#000'）。如果你想定義別的顏色，可以shade: [0.8, '#393D49']；如果你不想顯示遮罩，可以shade: 0
（12）shadeClose - 是否點擊遮罩關閉
? 類型：Boolean，默認：false
? 如果你的shade是存在的，那么你可以設定shadeClose來控制點擊彈層外區域關閉。
（13）、time - 自動關閉所需毫秒
? 類型：Number，默認：0
? 默認不會自動關閉。當你想自動關閉時，可以time: 5000，即代表5秒后自動關閉，注意單位是毫秒（1秒=1000毫秒）
（14）、id - 用于控制彈層唯一標識
? 類型：String，默認：空字符
? 設置該值后，不管是什么類型的層，都只允許同時彈出一個。一般用于頁面層和iframe層模式
（15）anim - 動畫
? 類型：Number，默認：0
? 我們的出場動畫全部采用CSS3。這意味著除了ie6-9，其它所有瀏覽器都是支持的。目前anim可支持的動畫類型有0-6 ，（請注意，3.0之前的版本用的 shift 參數）
（16）maxmin - 最大最小化。
? 類型：Boolean，默認：false
? 該參數值對type:1和type:2有效。默認不顯示最大小化按鈕。需要顯示配置maxmin: true即可
（17）fixed - 固定
? 類型：Boolean，默認：true
? 即鼠標滾動時，層是否固定在可視區域。如果不想，設置fixed: false即可
（18）、resize - 是否允許拉伸
? 類型：Boolean，默認：true
? 默認情況下，你可以在彈層右下角拖動來拉伸尺寸。如果對指定的彈層屏蔽該功能，設置 false即可。該參數對loading、tips層無效
（19）、scrollbar - 是否允許瀏覽器出現滾動條
? 類型：Boolean，默認：true
? 默認允許瀏覽器滾動，如果設定scrollbar: false，則屏蔽
（20）、maxWidth - 最大寬度
? 類型：，默認：360
? 請注意：只有當area: 'auto'時，maxWidth的設定才有效。
（21）、zIndex - 層疊順序
? 類型：，默認：19891014（賢心生日 0.0）
? 一般用于解決和其它組件的層疊沖突。
（22）、move - 觸發拖動的元素
? 類型：String/DOM/Boolean，默認：'.layui-layer-title'
? 默認是觸發標題區域拖拽。如果你想單獨定義，指向元素的選擇器或者DOM即可。如move: '.mine-move'。你還配置設定move: false來禁止拖拽
（23）、moveOut - 是否允許拖拽到窗口外
? 類型：Boolean，默認：false
? 默認只能在窗口內拖拽，如果你想讓拖到窗外，那么設定moveOut: true即可
（24）、moveEnd - 拖動完畢后的回調方法
? 類型：Function，默認：null
? 默認不會觸發moveEnd，如果你需要，設定moveEnd: function(){}即可。
（25）、tips - tips方向和顏色
? 類型：Number/Array，默認：2
? tips層的私有參數。支持上右下左四個方向，通過1-4進行方向設定。如tips: 3則表示在元素的下面出現。有時你還可能會定義一些顏色，可以設定tips: [1, '#c00']
（26）、tipsMore - 是否允許多個tips
? 類型：Boolean，默認：false
? 允許多個意味著不會銷毀之前的tips層。通過tipsMore: true開啟
（27）、success - 層彈出后的成功回調方法
? 類型：Function，默認：null
? 當你需要在層創建完畢時即執行一些語句，可以通過該回調。success會攜帶兩個參數，分別是當前層DOM當前層索引。

（28）、yes - 確定按鈕回調方法
? 類型：Function，默認：null
? 該回調攜帶兩個參數，分別為當前層索引、當前層DOM對象。

layer.open({content: '測試回調',yes: function(index, layero){//do somethinglayer.close(index); //如果設定了yes回調，需進行手工關閉} }); （29）、cancel - 右上角關閉按鈕觸發的回調
? 類型：Function，默認：null
? 該回調同樣只攜帶當前層索引一個參數，無需進行手工關閉。如果不想關閉，return false即可，

//只有當點擊confirm框的確定時，該層才會關閉 cancel: function(index){ if(confirm('確定要關閉么')){layer.close(index)}return false; } （30）、end - 層銷毀后觸發的回調
? 類型：Function，默認：null
? 無論是確認還是取消，只要層被銷毀了，end都會執行，不攜帶任何參數。
（31）、full/min/restore -分別代表最大化、最小化、還原 后觸發的回調
? 類型：Function，默認：null

? 攜帶一個參數，即當前層DOM

2、實例

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>layer-更懂你的web彈窗解決方案</title><script src="layer/jquery-1.10.2.min.js"></script><script src="layer/layer.js"></script><link rel="stylesheet" href="layer/skin/default/layer.css" /><style>div.conten{width: 100%;border: 2px solid #C9C5C5;margin-bottom: 10px;box-shadow: 5px 5px #CCCCCC;text-align: center;}button.bt{width: 100px;height: 40px;line-height: 40px;background-color:#2D93CA;border-radius: 10px;color:white;text-align: center;font-weight: bold;font-size: 15px;}.layer_notice{margin-bottom: 10px;text-align: center;width:200px;color: #999999;margin: 0px auto;}.layer-photos-demo{text-align: center;width:500px;color: #999999;margin: 0px auto;border: 2px solid #C9C5C5;margin-bottom: 10px;box-shadow: 5px 5px #CCCCCC;}body .demo-class .layui-layer-demo{background:#333;}</style> </head> <body> <div class="conten"><button οnclick="common(1)" class="bt">普通信息框</button><button οnclick="common(2)" class="bt">圖標</button><button οnclick="common(3)" class="bt">詢問框</button><button οnclick="common(4)" class="bt">提示層</button><button οnclick="common(5)" class="bt">墨綠深藍風</button> </div> <div class="conten"><button οnclick="common(6)" class="bt">捕獲頁</button><button οnclick="common(7)" class="bt">頁面層</button><button οnclick="common(8)" class="bt">自定頁</button><button οnclick="common(9)" class="bt" >tips層</button><button οnclick="common(10)" class="bt">iframe層</button> </div> <div class="conten"><button οnclick="common(11)" class="bt">iframe窗</button><button οnclick="common(12)" class="bt">加載層</button><button οnclick="common(13)" class="bt">loading層</button><button οnclick="common(14)" class="bt">小tips</button><button οnclick="common(15)" class="bt">prompt層</button> </div> <div class="conten"><button οnclick="common(16)" class="bt">tap層</button><button οnclick="common(17)" class="bt">相冊層</button> </div> <div class=" layer_notice">傲不可長，欲不可縱，樂不可極，志不可滿。</div> <div id="layer-photos-demo" class="layer-photos-demo"><img layer-pid="圖片id，可以不寫" layer-src="img/1.jpg" src="img/11.jpg" alt="圖片名"><img layer-pid="圖片id，可以不寫" layer-src="img/2.jpg" src="img/22.jpg" alt="圖片名"><img layer-pid="圖片id，可以不寫" layer-src="img/4.jpg" src="img/44.jpg" alt="圖片名"><img layer-pid="圖片id，可以不寫" layer-src="img/5.jpg" src="img/55.jpg" alt="圖片名"><img layer-pid="圖片id，可以不寫" layer-src="img/7.jpg" src="img/77.jpg" alt="圖片名"> </div> <script> function common(n){if(n==1){ //layer.alert(content, options, yes) - 普通信息框layer.alert('有了回調', {title:'提示'},function(index){layer.alert('加了個圖標', {icon: 1},function(index){layer.alert('只想簡單的提示',function(index){layer.close(index);//沒有close就需要手動關閉});});}); }else if(n==2){//圖標layer.alert('圖標0', {icon: 0},function(index){layer.alert('圖標'+index, {icon: 1},function(index){layer.alert('圖標'+index, {icon: 2},function(index){layer.alert('圖標'+index, {icon: 3},function(index){layer.alert('圖標'+index, {icon: 4},function(index){layer.alert('圖標'+index, {icon: 5},function(index){layer.alert('圖標'+index, {icon: 6},function(index){layer.close(index);})})})})})})})}else if(n==3){//layer.confirm(content, options, yes, cancel) - 詢問框layer.confirm('您是如何看待前端開發？', {btn: ['重要','奇葩'], //按鈕icon: 3, title:'提示'}, function(){layer.msg('的確很重要', {icon: 1});}, function(){layer.msg('也可以這樣', {time: 20000, //20s后自動關閉btn: ['明白了', '知道了']});});}else if(n==4){//layer.msg(content, options, end) - 提示框，3秒后自動消失layer.msg('玩命提示中',{icon: 1,time: 2000 //2秒關閉（如果不配置，默認是3秒）}, function(){layer.msg('呵呵');});}else if(n==5){//墨綠深藍風layer.alert('墨綠風格，點擊確認看深藍', {skin: 'layui-layer-molv', //樣式類名closeBtn: 0//layer提供了兩種風格的關閉按鈕}, function(){layer.alert('深藍style', {skin: 'layui-layer-lan',closeBtn: 0,//layer提供了兩種風格的關閉按鈕anim: 4 //動畫類型});});}else if(n==6){//捕獲頁layer.open({type: 1,shade: false,area: ['420px', '240px'], //寬高title: false, //不顯示標題content: $('.layer_notice'), //捕獲的元素cancel: function(){layer.msg('捕獲就是從頁面已經存在的元素上，包裹layer的結構', {time: 5000, icon:6});}});}else if(n==7){//頁面層layer.open({type: 1,skin: 'layui-layer-rim', //加上邊框area: ['420px', '240px'], //寬高content: 'html內容'});}else if(n==8){//自定頁layer.open({type: 1,skin: 'layui-layer-demo', //樣式類名closeBtn: 0, //不顯示關閉按鈕anim: 2,//anim可支持的動畫類型有0-6shadeClose: true, //開啟遮罩關閉content: '內容'});}else if(n==9){//tips層layer.tips('Hi，我是tips', '.layer_notice',{tips:2});}else if(n==10){//iframe層layer.open({type: 2,title: 'layer mobile頁',shadeClose: true,//是否點擊遮罩關閉shade:[0.8,'#393D49'],//遮罩area: ['380px', '90%'],content: 'http://blog.csdn.net/qq_27626333/article/details/53674829' //iframe的url}); }else if(n==11){//iframe窗layer.open({type: 2,title: false,closeBtn: 0, //不顯示關閉按鈕shade: [0],//不顯示遮罩area: ['340px', '215px'],offset: 'rb', //右下角彈出time: 2000, //2秒后自動關閉anim: 2,content: ['http://blog.csdn.net/qq_27626333/article/details/53674829', 'no'], //iframe的url，no代表不顯示滾動條end: function(){ //此處用于演示layer.open({type: 2,title: '很多時候，我們想最大化看，比如像這個頁面。',shadeClose: true,shade: false,maxmin: true, //開啟最大化最小化按鈕area: ['893px', '600px'],content: 'http://blog.csdn.net/qq_27626333/article/details/53674829'});}});}else if(n==12){//layer.load(icon, options) - 加載層var index = layer.load(2, {time: 10*1000}); //又換了種風格，并且設定最長等待10秒 //關閉//layer.close(index); }else if(n==13){//loading層var index = layer.load(1, {shade: [0.1,'#fff'],//0.1透明度的白色背景time:1000});}else if(n==14){//小tipslayer.tips('我是另外一個tips，只不過我長得跟之前那位稍有些不一樣。', '.layer_notice', {tips: [1, '#3595CC'],time: 4000});}else if(n==15){//layer.prompt(options, yes) - 輸入層//formType: 1, //輸入框類型，支持0（文本）默認1（密碼）2（多行文本）//value: '', //初始時的值，默認空字符//maxlength: 140, //可輸入文本的最大長度，默認500//yes攜帶value表單值、index索引、elem表單元素layer.prompt({title: '輸入任何口令，并確認', formType: 1}, function(pass, index){layer.close(index);layer.prompt({title: '隨便寫點啥，并確認', formType: 2}, function(text, index){layer.close(index);layer.msg('演示完畢！您的口令：'+ pass +'您最后寫下了：'+text);});});}else if(n==16){//layer.tab(options) - tab層layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1', content: '內容1'}, {title: 'TAB2', content: '內容2'}, {title: 'TAB3', content: '內容3'}]});}else if(n==17){//相冊層layer.photos({photos: '#layer-photos-demo',anim: 5 //0-6的選擇，指定彈出圖片動畫類型，默認隨機（請注意，3.0之前的版本用shift參數）}); } } </script> </body> </html>

總結

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

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