一:頁面引入和核心js檔案 layer.js

<script src="layer.js的路徑"></script>

二：基礎引數：

型別：Number，預設：0

layer提供了5種層型別。可傳入的值有：0（資訊框，預設）1（頁面層）2（iframe層）3（載入層）4（tips層）。 若你採用layer.open({type: 1})方式呼叫，則type為必填項（資訊框除外）

型別：String/Array/Boolean，預設：'資訊'

title支援三種類型的值，若你傳入的是普通的字串，如title :'我是標題'，那麼只會改變標題文字；若你還需要自定義標題區域樣式，那麼你可以title: ['文字', 'font-size:18px;']

型別：String/DOM/Array，預設：''

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

1. /!*
2. 如果是頁面層
3. */
4. layer.open({
5. type: 1,
6. content: '傳入任意的文字或html' //這裡content是一個普通的String
7. });
8. layer.open({
9. type: 1,
10. content: $('#id') //這裡content是一個DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響
11. });
12. //Ajax獲取
13. $.post('url', {}, function(str){
14. layer.open({
15. type: 1,
16. content: str //注意，如果str是object，那麼需要字元拼接。
17. });
18. });
19. /!*
20. 如果是iframe層
21. */
22. layer.open({
23. type: 2,
24. content: 'http://sentsin.com' //這裡content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no']
25. });
26. /!*
27. 如果是用layer.open執行tips層
28. */
29. layer.open({
30. type: 4,
31. content: ['內容', '#id'] //陣列第二項即吸附元素選擇器或者DOM
32. });

型別：String，預設：''

skin不僅允許你傳入layer內建的樣式class名，還可以傳入您自定義的class名。這是一個很好的切入點，意味著你可以藉助skin輕鬆完成不同的風格定製。目前layer內建的skin有：layui-layer-lanlayui-layer-molv，未來我們還會選擇性地內建更多，但更推薦您自己來定義。以下是一個自定義風格的簡單例子

1. //單個使用
2. layer.open({
3. skin: 'demo-class'
4. });
5. //全域性使用。即所有彈出層都預設採用，但是單個配置skin的優先順序更高
6. layer.config({
7. skin: 'demo-class'
8. })
9. //CSS
10. body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
11. body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
12. body .demo-class .layui-layer-btn a{background:#333;}
13. body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
14. …
15. 加上body是為了保證優先順序。你可以藉助Chrome除錯工具，定義更多樣式控制層更多的區域。

型別：String/Array，預設：'auto'

在預設狀態下，layer是寬高都自適應的，但當你只想定義寬度時，你可以area: '500px'，高度仍然是自適應的。當你寬高都要定義時，你可以area: ['500px', '300px']

型別：String/Array，預設：垂直水平居中

offset預設情況下不用設定。但如果你不想垂直水平居中，你還可以進行以下賦值：

型別：String/Boolean，預設：1

layer提供了兩種風格的關閉按鈕，可通過配置1和2來展示，如果不顯示，則closeBtn: 0

型別：Boolean，預設：false

如果你的shade是存在的，那麼你可以設定shadeClose來控制點選彈層外區域關閉。

型別：Number，預設：0

我們的出場動畫全部採用CSS3。這意味著除了ie6-9，其它所有瀏覽器都是支援的。目前anim可支援的動畫型別有0-6 如果不想顯示動畫，設定 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 引數

型別：Boolean，預設：false

該引數值對type:1和type:2有效。預設不顯示最大小化按鈕。需要顯示配置maxmin: true即可

型別：Function，預設：null

當你需要在層建立完畢時即執行一些語句，可以通過該回調。success會攜帶兩個引數，分別是當前層DOM當前層索引。如：

1. layer.open({
2. content: '測試回撥',
3. success: function(layero, index){
4. console.log(layero, index);
5. }
6. });

型別：Function，預設：null

該回調攜帶兩個引數，分別為當前層索引、當前層DOM物件。如：

1. layer.open({
2. content: '測試回撥',
3. yes: function(index, layero){
4. //do something
5. layer.close(index); //如果設定了yes回撥，需進行手工關閉
6. }
7. });

型別：Function，預設：null

該回調攜帶兩個引數，分別為：當前層索引引數（index）、當前層的DOM物件（layero），預設會自動觸發關閉。如果不想關閉，return false即可，如；

1. cancel: function(index, layero){
2. if(confirm('確定要關閉麼')){ //只有當點選confirm框的確定時，該層才會關閉
3. layer.close(index)
4. }
5. return false;
6. }

由於我們的layer內建了輕量級載入器，所以你根本不需要單獨引入css等檔案。但是載入總是需要過程的。當你在頁面一開啟就要執行彈層時，你最好是將彈層放入ready方法中，如：

1. /頁面一開啟就執行彈層
2. layer.ready(function(){
3. layer.msg('很高興一開場就見到你');
4. });

基本上是露臉率最高的方法，不管是使用哪種方式建立層，都是走layer.open()，建立任何型別的彈層都會返回一個當前層索引，上述的options即是基礎引數，另外，該文件統一採用options作為基礎引數的標識例子：

1. var index = layer.open({
2. content: 'test'
3. });
4. //拿到的index是一個重要的憑據，它是諸如layer.close(index)等方法的必傳引數。

type:3的深度定製。load並不需要你傳太多的引數，但如果你不喜歡預設的載入風格，你還有選擇空間。icon支援傳入0-2如果是0，無需傳。另外特別注意一點：load預設是不會自動關閉的，因為你一般會在ajax回撥體中關閉它。

1. /eg1
2. var index = layer.load();
3. //eg2
4. var index = layer.load(1); //換了種風格
5. //eg3
6. var index = layer.load(2, {time: 10*1000}); //又換了種風格，並且設定最長等待10秒
7. //關閉
8. layer.close(index);

當你試圖在當前頁獲取iframe頁的DOM元素時，你可以用此方法。selector即iframe頁的選擇器

1. layer.open({
2. type: 2,
3. content: 'test/iframe.html',
4. success: function(layero, index){
5. var body = layer.getChildFrame('body', index);
6. var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的視窗物件，執行iframe頁的方法：iframeWin.method();
7. console.log(body.html()) //得到iframe頁的body內容
8. body.find('input').val('Hi，我是從父頁來的')
9. }
10. });

此方法一般用於在iframe頁關閉自身時用到。

1. //假設這是iframe頁
2. var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
3. parent.layer.close(index); //再執行關閉

tab層只單獨定製了一個成員，即tab: []，這個好像沒有什麼可介紹的，簡單粗暴看例子

1. layer.tab({
2. area: ['600px', '300px'],
3. tab: [{
4. title: 'TAB1',
5. content: '內容1'
6. }, {
7. title: 'TAB2',
8. content: '內容2'
9. }, {
10. title: 'TAB3',
11. content: '內容3'
12. }]
13. });