基本屬性：
<!DOCTYPE html> <html> <head> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <link rel="stylesheet" href="css/layer.css" media="all"> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script src="js/layer.js"></script> </head> </head> <body> <div class="clear box layer-main"> <a href="javascript:;" onclick="test();">點我彈窗</a> </div> </body> <script> function test() { //在這里面輸入任何合法的js語句 layer.open({ type: 1, //page層 area: ['70%', '30%'], title: '彈出框', shade: 0.6,//遮罩透明度 shadeClose:true,//點擊遮罩關閉層 moveType: 1,//拖拽風格，0是默認，1是傳統拖動 shift: 1,//0-6的動畫形式，-1不開啟 fix:true,//不隨滾動條滾動，一直在可視區域。 border:[0], closeBtn:[1,true], content: '<div style="padding:10px;">這是一個非常普通的頁面層，可以傳入內容</div>', btn:['確定','取消'] }); } </script> </html>
我是為了測試移動端效果，才加的meta標簽，可以去掉。體驗pc端的效果。個人感覺pc端效果更好，移動端可以將就這用。
| 鍵: 值 | 描述 |
| 下表的屬性都是默認值，您可在調用時按需重新配置，他們可幫助你實現各式各樣的風格。如是調用： $.layer({鍵: 值, 鍵: 值, …}); | |
| type: 0 | 層的類型。0：信息框（默認），1：頁面層，2：iframe層，3：加載層，4：tips層。 此為重要參數，不同類型層的總開關，若為type:0則不需要配置，其它類型層在調用時必須設置type。 |
| title: '信息' | 控制默認標題欄。 如想自定義標題樣式，可以 title: ['標題', 'background:#c00;'] //第二個參數可書寫任意css 如不想顯示標題欄，配置title: false 即可 |
| maxmin: false | 是否輸出窗口最小化/全屏/還原按鈕。 如需要開啟，設置maxmin: true 即可 此功能為layer1.8開始新增 |
| offset: ['', ''] | 控制層坐標。 offset的值分別是： [縱坐標, 橫坐標]，默認為垂直水平居中 如果您要設定縱坐標，可以：offset:['200px', '']/td> |
| area: ['310px', '130px'] | 控制層寬高。 area值分別為：[寬度, 高度] 當設置為auto時，意味着采用自適應（iframe層不能設置auto）, 對於寬度，並不推薦您設置auto。 |
| border: [10, 0.3, '#000'] | 控制層的邊框。 border的值分別為：[邊框大小, 透明度, 顏色, layer1.8之前需在此處加true] 如果您不想顯示border，設置 border: [0] 即可 |
| shade: [0.5, '#000'] | 控制遮罩。 值分別是：[遮罩透明度, 遮罩顏色, layer1.8之前需在此處加true] 如果不想顯示遮罩，配置shade: [0]即可 |
| shadeClose: false | 用來控制點擊遮罩區域是否關閉層。 若開啟，設為true即可 |
| closeBtn: [0, true] | 控制層右上角關閉按鈕。 closeBtn的值分別為: [關閉按鈕的風格（支持0和1）, true] 若不想顯示關閉按鈕，配置 closeBtn: false即可 |
| time: 0 | 自動關閉等待秒數，整數值。 0表示不自動關閉，若3秒后自動關閉，time: 3即可 |
| fix: true, | 用於設定層是否不隨滾動條而滾動，固定在可視區域。 |
| move: '.xubox_title' | 設定某個元素來實現對層的拖拽。 值為：用來拖拽的元素選擇器 若不想拖拽，move: false即可 |
| moveOut: false | 用於控制層是否允許被拖出可視窗口外 |
| moveType: 0 | 用於配置拖拽類型（layer1.7之前版本不支持） 默認為引導式拖動層，若值設為1，則直接拖動層 |
| bgcolor: '#fff' | 用於控制層的背景色 如果不想設置任何顏色，設置空字符即可。但是對於type:0的對話框層而言，始終都是白色 |
| zIndex: 19891014 | 控制層堆疊順序（即css的z-index）。整數值。 合理設置它，可以避免與其它插件的層級沖突 |
| maxWidth: 400 | 最大寬度。整數值。 當area寬度設為auto時才有用。 |
| fadeIn: 300, | 用於控制層漸顯彈出（layer1.7之前版本不支持） 值為毫秒數 |
| btns: 1, | 按鈕的個數。提供了0-2的選擇，設置0表示不輸出按鈕 |
| btn: ['確定', '取消'], | [按鈕一的文本值 , 按鈕二的文本值] 必須btns值大於0才有效 |
| shift: '', | 用於控制動畫彈出 有七種選擇：左上(left-top),上(top), 右上(right-top),右下(right-bottom),下(bottom),左下(left-bottom),左('left')。 如shift:'top' 表示從上動畫彈出 |
dialog: {
type: 3,
msg: ''
}
|
信息框層模式提供的私有參數。使用時，按需配置即可 type: 圖標類型，提供了0-16的選擇，也許有你喜歡的。 設置-1不顯示圖標 msg: 信息框內容，重要參數 |
page: {
dom: '#id',
html: '',
url: '',
ok: function(datas){}
}
|
頁面層模式私有參數。 dom: 頁面已存在的選擇器 html: 直接傳入的html字符串。 url: ajax請求地址。 ok: ajax請求完畢后執行的回調，datas是異步傳遞過來的值。 需要特別注意的是，dom、html、url只需設定其中一個就行，若配置html或url，你必須也配置寬高值。 |
iframe: {
src: '',
scrolling: 'auto'
}
|
iframe層模式私有參數。 src: 要打開的網址。 scrolling: 是否允許iframe出現滾動條，默認自動。允許：'yes'，不允許：'no' |
loading: {
type: 0
}
|
加載層私有屬性。 type: loading圖標類型（提供了0-3的選擇）。 一般配合ajax使用 |
tips : {
msg: '',
follow: '#id',
guide: 0,
isGuide: true,
more: false,
style: ['', '']
}
|
tips提示層私有屬性。 msg: 提示內容。 follow: 吸附目標選擇器。 guide: 指引方向（0：上，1：右，2：下，3：左）。 isGuide: 是否顯示默認三角形。 這個參數可配合msg幫助你自定義三角形icon more: 是否允許多個tips style: [' color:#000; border:1px solid #FF9900; /* 此處可用來自定義tips的css樣式 */', '#FF9900']]。 數組第二個值，為三角形的顏色。 |
| 回調函數 | |
success: function(layero){
}
|
層彈出成功后的回調函數. layero是回調傳過來的當前層容器的實例，這意味着你可以對當前彈層進行dom操作 |
yes: function(index){}
|
按鈕一的回調函數 index為當前層的索引，主要用來回調執行后，配合layer.close(index)來關閉層 |
no: function(index){}
|
按鈕二的回調函數 |
close: function(index){}
|
層右上角關閉按鈕的點擊事件觸發回調函數。 |
end: function(){}
|
層被徹底關閉后執行的回調函數。 |
moveEnd: function(){}
|
拖拽完畢觸發的回調函數 |
min: function(layero){},
full: function(layero){},
restore: function(layero){}
|
分別為最小化、全屏、還原觸發后的回調函數 layero是當前層容器的實例 layer1.8開始新增 |
下面這些是為了湊字數：
<!DOCTYPE html>
<html>
<head>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<link rel="stylesheet" href="css/layer.css" media="all">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script src="js/layer.js"></script>
</head>
</head>
<body>
<div class="clear box layer-main">
<a href="javascript:;" onclick="test();">點我彈窗</a>
</div>
</body>
<script>
function test() {
//在這里面輸入任何合法的js語句
layer.open({
type: 1,
//page層
area: ['70%', '30%'],
title: '彈出框',
shade: 0.6,//遮罩透明度
shadeClose:true,//點擊遮罩關閉層
moveType: 1,//拖拽風格，0是默認，1是傳統拖動
shift: 1,//0-6的動畫形式，-1不開啟
fix:true,//不隨滾動條滾動，一直在可視區域。
border:[0],
closeBtn:[1,true],
content: '<div style="padding:10px;">這是一個非常普通的頁面層，可以傳入內容</div>',
btn:['確定','取消']
});
}
</script>
</html>