1. 彈層組件加載名稱: layer。

2. layer至今仍作為layui的代表作, 甚至讓很多人都誤以為layui = layer ui, 所以再次強調layer只是作為layui的一個彈層模塊, 由于其用戶基數較大, 所以至今仍把她作為獨立組件來維護。

3. 使用場景

3.1. 由于layer可以獨立使用, 也可以通過Layui模塊化使用。

場景	用前準備	調用方式
1. 作為獨立組件使用	如果你只是單獨想使用layer, 你可以去layer獨立版本官網下載組件包。你需要在你的頁面首先引入jQuery1.8以上的任意版本, 然后引入layer.js。	通過script標簽引入layer.js后, 直接用即可。
2. layui模塊化使用	如果你使用的是layui, 那么你直接在官網下載layui框架即可, 無需單獨引入jQuery和layer.js, 但需要引入layui.css和layui.js。	通過layui.use('layer', callback)加載模塊。

3.2. 作為獨立組件使用layer

<!-- 一定要先引入jquery.js, 再引入layer.js --> <script src="layer-v3.2.0/layer/jquery.js"></script> <script src="layer-v3.2.0/layer/layer.js"></script><script type="text/javascript">layer.msg('hello'); </script>

3.3. 在layui中使用layer

layui.use('layer', function(){var layer = layui.layer;layer.msg('hello'); });

4. layer.open(options) - 原始核心方法

4.1. 不管是使用哪種方式創建層, 都是走layer.open(), 創建任何類型的彈層都會返回一個當前層索引。options即是基礎參數。

5. type - 基本層類型

5.1. 類型: Number。默認值: 0。

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

6. title - 標題

6.1. 類型: String/Array/Boolean。默認值: '信息'。

6.2. title支持三種類型的值, 若你傳入的是普通的字符串, 如title: '我是標題', 那么只會改變標題文本; 若你還需要自定義標題區域樣式, 那么你可以title: ['文本', 'font-size:18px;'], 數組第二項可以寫任意css樣式; 如果你不想顯示標題欄, 你可以title: false。

7. content - 內容

7.1. 類型: String/DOM/Array。默認值: ''。

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

/!*如果是頁面層*/ layer.open({type: 1, content: '傳入任意的文本或html' // 這里content是一個普通的String }); layer.open({type: 1,content: $('#id') // 這里content是一個DOM, 注意: 最好該元素要存放在body最外層, 否則可能被其它的相對元素所影響 });/!*如果是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 });// Ajax獲取 $.post('url', {}, function(obj){layer.open({type: 1,content: obj.id + obj. name // 這里解析obj的屬性}); });

8. skin - 樣式類名

8.1. 類型: String。默認值: ''。

8.2. skin不僅允許你傳入layer內置的樣式class名, 還可以傳入您自定義的class名。這是一個很好的切入點, 意味著你可以借助skin輕松完成不同的風格定制。目前layer內置的skin有: layui-layer-lan、layui-layer-molv, 未來我們還會選擇性地內置更多, 但更推薦您自己來定義。以下是一個自定義風格的簡單例子:

body .layui-layer-c00 .layui-layer-title { background: #c00; color: #fff; border: none; } body .layui-layer-c00 .layui-layer-content { background: #5FB878; } body .layui-layer-c00 .layui-layer-btn { border-top: 1px solid #E9E7E7 } body .layui-layer-c00 .layui-layer-btn .layui-layer-btn0 { background: #01AAED; } body .layui-layer-c00 .layui-layer-btn .layui-layer-btn1 { background: #FFB800; }

8.3. skin對加載層和tips層沒有作用。

9. area - 寬高

9.1. 類型: String/Array。默認值: 'auto'。

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

10. offset - 坐標

10.1. 類型: String/Array。默認值: 垂直水平居中。

10.2. offset默認情況下不用設置。但如果你不想垂直水平居中, 你還可以進行以下賦值:

11. icon - 圖標

11.1. 圖標是信息框和加載層的私有參數。

11.2. 類型: Number。默認值: -1(信息框), 0(加載層)。

11.3. 信息框默認不顯示圖標, 當你想顯示圖標時, 默認皮膚可以傳入0-6。如果是加載層, 可以傳入0-2。

12. btn - 按鈕

12.1. 類型: String/Array。默認值: '確認'。

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

layer.open({btn: ['按鈕一', '按鈕二', '按鈕三'],yes: function(index, layero){// 按鈕[按鈕一]的回調},btn2: function(index, layero){// 按鈕[按鈕二]的回調// return false; 開啟該代碼可禁止點擊該按鈕關閉層},btn3: function(index, layero){// 按鈕[按鈕三]的回調// return false; 開啟該代碼可禁止點擊該按鈕關閉層},cancel: function(){ // 右上角關閉按鈕回調// return false; 開啟該代碼可禁止點擊該按鈕關閉層} });

13. btnAlign - 按鈕排列

13.1. 類型: String。默認值: r。

13.2. 你可以快捷定義按鈕的排列位置, btnAlign的默認值為r, 即右對齊。該參數可支持的賦值如下:

14. closeBtn - 關閉按鈕

14.1. 類型: String/Boolean。默認值: 1。

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

15. shade - 遮罩

15.1. 類型: String/Array/Boolean。默認值: 0.3。

15.2. 即彈層外區域。默認是0.3透明度的黑色背景('#000')。如果你想定義別的顏色, 可以shade: [0.8, '#393D49']; 如果你不想顯示遮罩, 可以shade: 0。

16. shadeClose - 是否點擊遮罩關閉

16.1. 類型: Boolean。默認值: false。

16.2. 如果你的shade是存在的, 那么你可以設定shadeClose來控制點擊彈層外區域關閉。

17. time - 自動關閉所需毫秒

17.1. 類型: Number。默認值: 0。

17.2. 默認不會自動關閉。當你想自動關閉時, 可以time: 5000, 即代表5秒后自動關閉, 注意單位是毫秒(1秒=1000毫秒)。

18. id - 用于控制彈層唯一標識

18.1. 類型: String。默認值: 空字符。

18.2. 設置該值后, 不管是什么類型的層, 都只允許同時彈出一個。一般用于頁面層和iframe層模式。

19. anim - 彈出動畫

19.1. 類型: Number。默認值: 0。

19.2. 我們的出場動畫全部采用CSS3。目前anim可支持的動畫類型有0-6如果不想顯示動畫, 設置anim: -1 即可。

20. isOutAnim - 關閉動畫

20.1. 類型: Boolean。默認值: true。

20.2. 默認情況下, 關閉層時會有一個過度動畫。如果你不想開啟, 設置isOutAnim: false即可。

21. maxmin - 最大最小化

21.1. 類型: Boolean。默認值: false。

21.2. 該參數值對type:1和type:2有效。默認不顯示最大小化按鈕。需要顯示配置maxmin: true即可。

22. fixed - 固定

22.1. 類型: Boolean。默認值: true。

22.2. 即鼠標滾動時, 層是否固定在可視區域。如果不想, 設置fixed: false即可。

23. resize - 是否允許拉伸

23.1. 類型: Boolean。默認值: true。

23.2. 默認情況下, 你可以在彈層右下角拖動來拉伸尺寸。如果對指定的彈層屏蔽該功能, 設置false即可。該參數對loading、tips層無效。

24. resizing - 監聽窗口拉伸動作

24.1. 類型: Function。默認值: null。

24.2. 當你拖拽彈層右下角對窗體進行尺寸調整時, 如果你設定了該回調, 則會執行。回調返回一個參數: 當前層的DOM對象。

resizing: function(layero){console.log(layero); }

25. zIndex - 層疊順序

25.1. 類型: Number。默認值: 19891014。

25.2. 一般用于解決和其它組件的層疊沖突。

26. move - 觸發拖動的元素

26.1. 類型: String/DOM/Boolean。默認值: '.layui-layer-title'。

26.2. 默認是觸發標題區域拖拽。如果你想單獨定義, 指向元素的選擇器或者DOM即可。如move: '.mine-move'。你還配置設定move: false來禁止拖拽。

27. moveOut - 是否允許拖拽到窗口外

27.1. 類型: Boolean。默認值: false。

27.2. 默認只能在窗口內拖拽, 如果你想讓拖到窗外, 那么設定moveOut: true即可。

28. moveEnd - 拖動完畢后的回調方法

28.1. 類型: Function。默認值: null。

28.2. 默認不會觸發moveEnd, 如果你需要, 設定moveEnd: function(layero){}即可。其中layero為當前層的DOM對象。

moveEnd: function(layero){console.log(layero); }

29. tips - tips方向和顏色

29.1. 類型: Number/Array。默認值: 2。

29.2. tips層的私有參數。支持上右下左四個方向, 通過1-4進行方向設定。如tips: 3則表示在元素的下面出現。有時你還可能會定義一些顏色, 可以設定tips: [1, '#c00']。

30. tipsMore - 是否允許多個tips

30.1. 類型: Boolean。默認值: false。

30.2. 允許多個意味著不會銷毀之前的tips層。通過tipsMore: true開啟。

31. success - 層彈出后的成功回調方法

31.1. 類型: Function。默認值: null。

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

success: function(layero, index){console.log(layero, index); }

32. yes - 確定按鈕回調方法

32.1. 類型: Function。默認值: null。

32.2. 該回調攜帶兩個參數, 分別為當前層索引、當前層DOM對象。如:

yes: function(index, layero){console.log(layero, index); }

33. cancel - 右上角關閉按鈕觸發的回調

33.1. 類型: Function。默認值: null。

33.2. 該回調攜帶兩個參數, 分別為: 當前層索引參數(index)、當前層的DOM對象(layero), 默認會自動觸發關閉。如果不想關閉, return false即可, 如:

cancel: function(index, layero){ console.log(layero, index); }

34. end - 層銷毀后觸發的回調

34.1. 類型: Function。默認值: null。

34.2. 無論是確認還是取消, 只要層被銷毀了, end都會執行, 不攜帶任何參數。

end: function(){ console.log('---end---'); }

35. full/min/restore -分別代表最大化、最小化、還原后觸發的回調

35.1. 類型: Function。默認值: null。

35.2. 攜帶一個參數, 即當前層DOM。

full: function(layero){console.log(layero); } min: function(layero){console.log(layero); } restore: function(layero){console.log(layero); }

36. layer.config(options) - 初始化全局配置

36.1. 這是一個可以重要也可以不重要的方法, 重要的是, 它的權利真的很大, 尤其是在模塊化加載layer時, 你會發現你必須要用到它。它不僅可以配置一些諸如路徑、加載的模塊, 甚至還可以決定整個彈層的默認參數。而說它不重要, 是因為多數情況下, 你會發現, 你似乎不是那么十分需要它。

36.2. layer.config可以配置層默認的基礎參數, 如:

layer.config({anim: 1, // 默認動畫風格skin: 'layui-layer-molv' // 默認皮膚… }); // 除此之外, extend還允許你加載拓展的css皮膚, 如: layer.config({// 如果是獨立版的layer, 則將myskin存放在./skin目錄下// 如果是layui中使用layer, 則將myskin存放在./css/modules/layer目錄下extend: 'myskin/style.css' });

37. layer.ready(callback) - 初始化就緒

37.1. 由于我們的layer內置了輕量級加載器, 所以你根本不需要單獨引入css等文件。但是加載總是需要過程的。當你在頁面一打開就要執行彈層時, 你最好是將彈層放入ready方法中, 如: ?

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

38. layer.alert(content, options, yes) - 普通信息框

38.1. 它的彈出似乎顯得有些高調, 一般用于對用戶造成比較強烈的關注, 類似系統alert, 但卻比alert更靈便。它的參數是自動向左補齊的。通過第二個參數, 可以設定各種你所需要的基礎參數, 但如果你不需要的話, 直接寫回調即可。如:

// eg1 layer.alert('只想簡單的提示');// eg2 layer.alert('加了個圖標', {icon: 1}); // 這時如果你也還想執行yes回調, 可以放在第三個參數中。// eg3 layer.alert('有了回調', function(index){// do somethinglayer.close(index); });

39. layer.confirm(content, options, yes, cancel) - 確認框

39.1. 類似系統confirm, 但卻遠勝confirm, 另外它不是和系統的confirm一樣阻塞, 你需要把交互的語句放在回調體中。同樣的, 它的參數也是自動補齊的。

// eg1 layer.confirm('不開心。');// eg2 layer.confirm('不開心。', {icon: 3});// eg3 layer.confirm('不開心。', function(index){layer.close(index); }, function(index){layer.close(index); });// eg4 layer.confirm('不開心。', {icon: 3}, function(index){layer.close(index); }, function(index){layer.close(index); });

40. layer.msg(content, options, end) - 提示框

40.1. 它簡單, 而且足夠得自覺, 它不僅占據很少的面積, 而且默認還會3秒后自動消失。在作用方面, 它堅持零用戶操作。而且它的參數也是自動補齊的。

// eg1 layer.msg('只想弱弱提示');// eg2 layer.msg('有表情地提示', {icon: 6}); // eg3 layer.msg('關閉后想做些什么', function(){// do something });// eg4 layer.msg('同上', {icon: 1,time: 2000 // 2秒關閉(如果不配置, 默認是3秒) }, function(){// do something });

41. layer.load(icon, options) - 加載層

41.1. type:3的深度定制。load并不需要你傳太多的參數, 但如果你不喜歡默認的加載風格, 你還有選擇空間。icon支持傳入0-2, 如果是0, 無需傳。另外特別注意一點: load默認是不會自動關閉的, 因為你一般會在ajax回調體中關閉它。

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

42. layer.tips(content, follow, options) - tips層

42.1. type:4的深度定制。它擁有和msg一樣的低調和自覺, 而且會智能定位, 即靈活地判斷它應該出現在哪邊。默認是在元素右邊彈出。

43. layer.close(index) - 關閉特定層

43.1. 關于它似乎沒有太多介紹的必要, 唯一讓你疑惑的, 可能就是這個index了吧。事實上它非常容易得到。

// 調用如下方法的時候都會返回一個index值 var index = layer.open(); var index = layer.alert(); var index = layer.msg(); var index = layer.confirm(); var index = layer.tips(); var index = layer.load(); var index = layer.prompt(); var index = layer.tab();// 你只需要給layer.close(index)方法傳入它們對應的index, 就可以關閉特定層 layer.close(index);// 如果你想關閉最新彈出的層, 直接獲取layer.index即可 layer.close(layer.index);

44. layer.closeAll(type) - 關閉所有層

44.1. 如果你很懶, 你不想去獲取index你只想關閉。那么closeAll真的可以幫上你。如果你不指向層類型的話, 它會銷毀掉當前頁所有的layer層。當然, 如果你只想關閉某個類型的層, 那么你可以:

layer.closeAll(); // 瘋狂模式, 關閉所有層 layer.closeAll('dialog'); // 關閉所有的信息框 layer.closeAll('page'); // 關閉所有的頁面層 layer.closeAll('iframe'); // 關閉所有的iframe層 layer.closeAll('loading'); // 關閉所有的加載層 layer.closeAll('tips'); // 關閉所有的tips層

45. layer.style(index, cssStyle) - 重新定義層的樣式

45.1. 該方法對loading層和tips層無效。參數index為層的索引, cssStyle允許你傳入任意的css屬性:

// 重新給指定層設定width、top等 layer.style(index, {width: '1000px',top: '10px' });

46. layer.title(title, index) - 改變層的標題

46.1. 使用方式: layer.title('標題變了', index)。

47. layer.getChildFrame(selector, index) - 獲取iframe頁的DOM

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

48. layer.iframeAuto(index) - 指定iframe層自適應

48.1. 調用該方法時, iframe層的高度會重新進行適應。

49. layer.iframeSrc(index, url) - 重置特定iframe url

49.1. 使用方式: layer.iframeSrc(index, 'http://sentsin.com')。

50. layer.setTop(layero) -置頂當前窗口

50.1. 非常強大的一個方法, 雖然一般很少用。但是當你的頁面有很多很多layer窗口, 你需要像Window窗體那樣, 點擊某個窗口, 該窗體就置頂在上面, 那么setTop可以來輕松實現。它采用巧妙的邏輯, 以使這種置頂的性能達到最優。

// 通過這種方式彈出的層, 每當它被選擇, 就會置頂。 layer.open({type: 2,shade: false,area: '500px',maxmin: true,content: 'http://www.layui.com',zIndex: layer.zIndex, // 重點1success: function(layero){layer.setTop(layero); // 重點2} });

51. layer.full()、layer.min()、layer.restore() - 手工執行最大小化

51.1. 一般用于在自定義元素上觸發最大化、最小化和全屏。

52. layer.prompt(options, yes) - 輸入層

52.1. prompt的參數也是向前補齊的。options不僅可支持傳入基礎參數, 還可以傳入prompt專用的屬性, 當然, 也可以不傳。yes攜帶value 表單值、index 索引、elem 表單元素:

// eg1 layer.prompt({formType: 1,value: '',maxlength: 140 });// eg2 layer.prompt(function(value, index, elem){alert(value); layer.close(index); });// eg3 layer.prompt({formType: 2,value: '',maxlength: 140 },function(value, index, elem){alert(value); layer.close(index); });

53. layer.tab(options) - tab層

53.1. tab層只單獨定制了一個成員, 即tab: [], 簡單粗暴看例子:

layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1', content: '內容1'}, {title: 'TAB2', content: '內容2'}, {title: 'TAB3', content: '內容3'}] });

54. layer.photos(options) - 相冊層

54.1. 相冊層, 也可以稱之為圖片查看器。它的出場動畫從layer內置的動畫類型中隨機展現。photos支持傳入json和直接讀取頁面圖片兩種方式。

54.2. 如果是json傳入, 如下:

<script type="text/javascript">layui.use(['util', 'layer'], function() {var layer = layui.layer,util = layui.util;var json = {"title": "vivo NEX 3", // 相冊標題"id": 123, // 相冊id"start": 0, // 初始顯示的圖片序號, 默認0"data": [ // 相冊包含的圖片, 數組格式{"alt": "vivo NEX 3 正反面圖","pid": 100101, // 圖片id"src": "vivo_big_01.png", // 原圖地址"thumb": "vivo_01.png" // 縮略圖地址},{"alt": "vivo NEX 3 正面圖","pid": 100102, // 圖片id"src": "vivo_big_02.png", // 原圖地址"thumb": "vivo_02.png" // 縮略圖地址},{"alt": "vivo NEX 3 反面圖","pid": 100103, // 圖片id"src": "vivo_big_03.png", // 原圖地址"thumb": "vivo_03.png" // 縮略圖地址},{"alt": "vivo NEX 3 多色系圖","pid": 100104, // 圖片id"src": "vivo_big_04.png", // 原圖地址"thumb": "vivo_04.png" // 縮略圖地址}]};layer.photos({photos: json,anim: 1 // 0-6的選擇, 指定彈出圖片動畫類型, 默認隨機});}); </script>

54.3. 如果是直接從頁面中獲取圖片, 那么需要指向圖片的父容器, 并且你的img可以設定一些規定的屬性(但不是必須的):

<div id="layer-photos-demo" class="layer-photos-demo"><img layer-pid="100101" layer-src="vivo_big_01.png" src="vivo_01.png" alt="vivo NEX 3 正反面圖"><img layer-pid="100102" layer-src="vivo_big_02.png" src="vivo_02.png" alt="vivo NEX 3 正面圖"><img layer-pid="100103" layer-src="vivo_big_03.png" src="vivo_03.png" alt="vivo NEX 3 反面圖"><img layer-pid="100104" layer-src="vivo_big_04.png" src="vivo_04.png" alt="vivo NEX 3 多色系圖"> </div><script type="text/javascript">layui.use(['util', 'layer'], function() {var layer = layui.layer,util = layui.util;layer.photos({photos: '#layer-photos-demo',anim: 5 // 0-6的選擇, 指定彈出圖片動畫類型, 默認隨機,tab: function(pic, layero){console.log('pic = ' + pic + ', layero = ' + layero);}}); }); </script>

54.4. 另外, photos還有個tab回調, 切換圖片時觸發。

55. layer.open()方法例子

55.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>layer.open(options)方法</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script><style type="text/css">body .layui-layer-c00 .layui-layer-title { background: #c00; color: #fff; border: none; }body .layui-layer-c00 .layui-layer-content { background: #5FB878; }body .layui-layer-c00 .layui-layer-btn { border-top: 1px solid #E9E7E7 }body .layui-layer-c00 .layui-layer-btn .layui-layer-btn0 { background: #01AAED; }body .layui-layer-c00 .layui-layer-btn .layui-layer-btn1 { background: #FFB800; }</style></head><body><br /><br /><button id="id0" class="layui-btn" lay-active="type0">(信息框, 默認)layer.open({type: 0})</button> <button id="id1" class="layui-btn" lay-active="type1">(頁面層)layer.open({type: 1})</button> <button id="id2" class="layui-btn" lay-active="type2">(iframe層)layer.open({type: 2})</button> <button id="id3" class="layui-btn" lay-active="type3">(加載層)layer.open({type: 3})</button> <button id="id4" class="layui-btn" lay-active="type4">(tips層)layer.open({type: 4})</button> <br /> <br /><button id="id5" class="layui-btn" lay-active="type0_1">多按鈕信息框</button><button id="id6" class="layui-btn" lay-active="type0_2">拖動內容區域可移動</button><button id="id7" class="layui-btn" lay-active="type4_1">上面顯示tips層</button><button id="id8" class="layui-btn" lay-active="type4_2">下面顯示tips層</button><button id="id9" class="layui-btn" lay-active="type4_3">左面顯示tips層</button><script type="text/javascript">layui.use(['util', 'layer'], function() {var layer = layui.layer,util = layui.util;var id1BtnDoc = document.getElementById('id1');var top = id1BtnDoc.offsetHeight + id1BtnDoc.offsetTop + 3;var left = id1BtnDoc.offsetLeft;util.event('lay-active', {type0: function() {layer.open({type: 0 ,title: '我是默認的信息框',content: 'content可傳入的值是靈活多變的, 不僅可以傳入普通的html內容, 還可以指定DOM, 更可以隨著type的不同而不同。',icon: 0,closeBtn: false,shadeClose: true,resize: false });},type1: function() {layer.open({type: 1 ,title: '我是頁面層',content: 'content可傳入的值是靈活多變的, 不僅可以傳入普通的html內容, 還可以指定DOM, 更可以隨著type的不同而不同。',skin: 'layui-layer-lan',area: ['500px', '300px'],offset: [top, left],closeBtn: 2,shade: 0,id: 'pagelayer',anim: 1,isOutAnim: false,resize: false});},type2: function() {layer.open({type: 2 ,title: '我是iframe層',content: 'http://www.baidu.com',skin: 'layui-layer-molv',shade: 0.7,shadeClose: true,id: 'iframe',anim: 2,maxmin: true,resizing: function(layero){console.log(layero);},full: function(layero){console.log(layero);},min: function(layero){console.log(layero);},restore: function(layero){console.log(layero);} });},type3: function() {layer.open({type: 3 ,title: '我是加載層',content: '正在努力加載, 請耐心等待...',icon: 0,shade: 0.1,time: 3000,anim: 3});},type4: function() {layer.open({type: 4 ,title: '我是tips層',content: ['content可傳入的值是靈活多變的, 不僅可以傳入普通的html內容, 還可以指定DOM, 更可以隨著type的不同而不同。', "#id4"],shade: false,time: 3000,anim: 4,tipsMore: true});},type0_1: function() {layer.open({type: 0 ,title: '我是默認的信息框',content: 'content可傳入的值是靈活多變的, 不僅可以傳入普通的html內容, 還可以指定DOM, 更可以隨著type的不同而不同。',skin: 'layui-layer-c00',area: ['800px', '500px'],offset: 'rb',icon: 1,btn: ['yes', 'no'],btnAlign: 'c',closeBtn: 1,shade: 0.9,shadeClose: true,anim: 5,resize: false,success: function(layero, index){console.log(layero, index);},yes: function(index, layero){console.log(layero, index);},btn2: function(index, layero){console.log(layero, index);},cancel: function(index, layero){ console.log(layero, index); } ,end: function(){ console.log('---end---');}});},type0_2: function() {layer.open({type: 0 ,title: '我是默認的信息框',content: 'content可傳入的值是靈活多變的, 不僅可以傳入普通的html內容, 還可以指定DOM, 更可以隨著type的不同而不同。',icon: 2,anim: 6,move: '.layui-layer-content' ,moveOut: true,moveEnd: function(layero){console.log(layero);}});},type4_1: function() {layer.open({type: 4 ,title: '我是tips層',content: ['content可傳入的值是靈活多變的, 不僅可以傳入普通的html內容, 還可以指定DOM, 更可以隨著type的不同而不同。', "#id7"],shade: false,time: 8000,tips: 1,tipsMore: true});},type4_2: function() {layer.open({type: 4 ,title: '我是tips層',content: ['content可傳入的值是靈活多變的, 不僅可以傳入普通的html內容, 還可以指定DOM, 更可以隨著type的不同而不同。', "#id8"],shade: false,time: 8000,tips: 3,tipsMore: true});},type4_3: function() {layer.open({type: 4 ,title: '我是tips層',content: ['content可傳入的值是靈活多變的, 不僅可以傳入普通的html內容, 還可以指定DOM, 更可以隨著type的不同而不同。', "#id9"],shade: false,time: 8000,tips: 4,tipsMore: true});}});}); </script></body> </html>

56. layer單獨使用例子

56.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>layer單獨使用</title><!-- 一定要先引入jquery.js, 再引入layer.js --><script src="layer-v3.2.0/layer/jquery.js"></script><script src="layer-v3.2.0/layer/layer.js"></script></head><body><div style="width: 500px; height: 2000px; background: #c2c2c2;"></div><script type="text/javascript">;!function(){layer.ready(function(){layer.open({type: 0 ,title: '我是默認的信息框',content: 'content可傳入的值是靈活多變的, 不僅可以傳入普通的html內容, 還可以指定DOM, 更可以隨著type的不同而不同。',offset: 'lt',fixed: false}); });}(); </script></body> </html>

57. 例子

57.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>彈層 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><button id="id0" class="layui-btn" lay-active="type0">(信息框, 默認)layer.open({type: 0})</button> <button id="id1" class="layui-btn" lay-active="type1">(頁面層)layer.open({type: 1})</button> <button id="id2" class="layui-btn" lay-active="type2">(iframe層)layer.open({type: 2})</button> <button id="id3" class="layui-btn" lay-active="type3">(加載層)layer.open({type: 3})</button> <button id="id4" class="layui-btn" lay-active="type4">(tips層)layer.open({type: 4})</button> <br /> <br /><button id="close-1" class="layui-btn" lay-active="closeAll">關閉所有層</button><button id="close-2" class="layui-btn" lay-active="closeLatest">關閉最新彈</button><button id="close-3" class="layui-btn" lay-active="closeDialog">關閉所有的信息框</button><button id="close-4" class="layui-btn" lay-active="closePage">關閉所有的頁面層</button><button id="close-5" class="layui-btn" lay-active="closeIframe">關閉所有的iframe層</button><button id="close-6" class="layui-btn" lay-active="closeLoading">關閉所有的加載層</button><button id="close-7" class="layui-btn" lay-active="closeTips">關閉所有的tips層</button><br /> <br /><button id="id5" class="layui-btn" lay-active="alert">layer.alert()</button><button id="id6" class="layui-btn" lay-active="msg">layer.msg()</button><button id="id7" class="layui-btn" lay-active="confirm">layer.confirm()</button><button id="id8" class="layui-btn" lay-active="tips">layer.tips()</button><button id="id9" class="layui-btn" lay-active="load">layer.load()</button><button id="id10" class="layui-btn" lay-active="prompt1">layer.prompt() 1</button><button id="id11" class="layui-btn" lay-active="prompt2">layer.prompt() 2</button><button id="id12" class="layui-btn" lay-active="prompt3">layer.prompt() 3</button><button id="id13" class="layui-btn" lay-active="tab">layer.tab()</button> <br /> <br /><div id="layer-photos-demo" class="layer-photos-demo"><img layer-pid="100101" layer-src="vivo_big_01.png" src="vivo_01.png" alt="vivo NEX 3 正反面圖"><img layer-pid="100102" layer-src="vivo_big_02.png" src="vivo_02.png" alt="vivo NEX 3 正面圖"><img layer-pid="100103" layer-src="vivo_big_03.png" src="vivo_03.png" alt="vivo NEX 3 反面圖"><img layer-pid="100104" layer-src="vivo_big_04.png" src="vivo_04.png" alt="vivo NEX 3 多色系圖"></div><script type="text/javascript">layui.use(['util', 'layer'], function() {var layer = layui.layer,util = layui.util;layer.photos({photos: '#layer-photos-demo',anim: 5 // 0-6的選擇, 指定彈出圖片動畫類型, 默認隨機,tab: function(pic, layero){console.log('pic = ' + pic + ', layero = ' + layero);}}); util.event('lay-active', {closeAll: function() {layer.closeAll(); // 瘋狂模式, 關閉所有層},closeLatest: function() {layer.close(layer.index); // 關閉最新彈出的層},closeDialog: function() {layer.closeAll('dialog'); // 關閉所有的信息框},closePage: function() {layer.closeAll('page'); // 關閉所有的頁面層},closeIframe: function() {layer.closeAll('iframe'); // 關閉所有的iframe層},closeLoading: function() {layer.closeAll('loading'); // 關閉所有的加載層},closeTips: function() {layer.closeAll('tips'); // 關閉所有的tips層 },type0: function() {var idx = layer.open({type: 0 ,title: '我是默認的信息框',content: 'content可傳入的值是靈活多變的, 不僅可以傳入普通的html內容, 還可以指定DOM, 更可以隨著type的不同而不同。',shade: 0});console.log('type0 idx = ' + idx);},type1: function() {var idx = layer.open({type: 1 ,title: '我是頁面層',content: 'content可傳入的值是靈活多變的, 不僅可以傳入普通的html內容, 還可以指定DOM, 更可以隨著type的不同而不同。',shade: 0,area: ['500px', '300px']});console.log('type1 idx = ' + idx);},type2: function() {var idx = layer.open({type: 2 ,title: '我是iframe層',content: 'http://www.baidu.com',shade: 0});console.log('type2 idx = ' + idx);},type3: function() {var idx = layer.open({type: 3 ,title: '我是加載層',content: '正在努力加載, 請耐心等待...',icon: 0,shade: false});console.log('type3 idx = ' + idx);},type4: function() {var idx = layer.open({type: 4 ,title: '我是tips層',content: ['content可傳入的值是靈活多變的, 不僅可以傳入普通的html內容, 還可以指定DOM, 更可以隨著type的不同而不同。', "#id4"],shade: false});console.log('type4 idx = ' + idx);},alert: function() {var idx = layer.alert('酷斃了', {icon: 1, shade: 0}, function(index){console.log('---alert yes方法---');});console.log('alert idx = ' + idx);},msg: function() {var idx = layer.msg('不開心。', {time: 0, icon: 2, shade: 0}, function(index){console.log('---msg end方法---');});console.log('msg idx = ' + idx);},confirm: function() {var idx = layer.confirm('不開心。', {icon: 3, shade: 0}, function(index){console.log('---confirm yes方法---');}, function(index){console.log('---confirm cancel方法---');});console.log('confirm idx = ' + idx);},tips: function() {var idx = layer.tips('我是tips層', '#id8', {time: 0, shade: 0, tips: 3});console.log('tips idx = ' + idx);},load: function() {var idx = layer.load(1, {content: '我是加載層', shade: 0});console.log('load idx = ' + idx);},prompt1: function() {var idx = layer.prompt({formType: 1 // 輸入框類型, 支持0是文本(默認值), 1是密碼, 2是多行文本,value: '' // 初始時的值, 默認空字符,maxlength: 140 // 可輸入文本的最大長度, 默認500,shade: 0});console.log('prompt1 idx = ' + idx);},prompt2: function() {layer.prompt(function(value, index, elem){alert(value); //得到valuelayer.close(index);});},prompt3: function() {layer.prompt({formType: 2, // 輸入框類型, 支持0是文本(默認值), 1是密碼, 2是多行文本value: '', // 初始時的值, 默認空字符maxlength: 140 // 可輸入文本的最大長度, 默認500},function(value, index, elem){alert(value); // 得到valuelayer.close(index);});},tab: function() {var idx = layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1', content: '內容1'}, {title: 'TAB2', content: '內容2'}, {title: 'TAB3', content: '內容3'}],shade: 0});console.log('tab idx = ' + idx);}});}); </script></body> </html>

?

總結

以上是生活随笔為你收集整理的026-弹层组件的全部內容，希望文章能夠幫你解決所遇到的問題。

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