layui彈出層

模塊加載名稱：layer，layer獨立組件官網：layer.layui.co

轉載自：https://www.w3cschool.cn/layui/c86d1r32.html

1.type-基本層類型

類型：Number，默認：0

layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）

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-lanlayui-layer-molv，未來我們還會選擇性地內置更多，但更推薦您自己來定義。以下是一個自定義風格的簡單例子

//單個使用layer.open({ skin: 'demo-class'});//全局使用。即所有彈出層都默認採用，但是單個配置skin的優先級更高layer.config({ skin: 'demo-class'})//CSS body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}body .demo-class .layui-layer-btn a{background:#333;}body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}…加上body是爲了保證優先級。你可以藉助Chrome調試工具，定義更多樣式控制層更多的區域。

5.area-寬高

類型：String/Array，默認：'auto'

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

6.offset-座標

類型：String/Array，默認：'auto'

默認垂直水平居中。但當你只想定義top時，你可以offset: '100px'。當您top、left都要定義時，你可以offset: ['100px', '200px']。除此之外，你還可以定義offset: 'rb'，表示右下角。其它的特殊座標，你可以自己計算賦值。

7.icon-圖標

類型：Number，默認：-1（信息框）/0（加載層）

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

//eg1layer.alert('酷斃了', {icon: 1});//eg2layer.msg('不開心。。', {icon: 5});//eg3layer.load(1); //風格1的加載

8.btn-按鈕

類型：String/Array，默認：'確認'

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

//eg1 layer.confirm('納尼？', { btn: ['按鈕一', '按鈕二', '按鈕三'] //可以無限個按鈕 ,btn3: function(index, layero){ //按鈕【按鈕三】的回調 }}, function(index, layero){ //按鈕【按鈕一】的回調}, function(index){ //按鈕【按鈕二】的回調});//eg2layer.open({ content: 'test' ,btn: ['按鈕一', '按鈕二', '按鈕三'] ,yes: function(index, layero){ //按鈕【按鈕一】的回調 },btn2: function(index, layero){ //按鈕【按鈕二】的回調 },btn3: function(index, layero){ //按鈕【按鈕三】的回調 } ,cancel: function(){ //右上角關閉回調 }});

9.closeBtn-關閉按鈕

類型：String/Boolean，默認：1

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

10.fix-固定

類型：Boolean，默認：true

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

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

     類型：Boolean，默認：false

    默認只能在窗口內拖拽，如果你想讓拖到窗外，那麼設定moveOut: true即可

12.layer.alert(content,options,yes)-普通提示框

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

codelayui.code

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

13.layer.confirm(content,options,yes,cancel)-詢問框

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

codelayui.code

1. //eg1
2. layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
3. //do something
5. layer.close(index);
6. });
7. //eg2
8. layer.confirm('is not?', function(index){
9. //do something
11. layer.close(index);
12. });

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

我在源碼中有了相對較大的篇幅來定製了這個msg，目的是想將其打造成露臉率最高的提示框。而事實上我的確也在大量地使用它。因爲它簡單，而且足夠得自覺，它不僅佔據很少的面積，而且默認還會3秒後自動消失所有這一切都決定了我對msg的愛。因此我賦予了她許多可能在外形方面，它堅持簡陋的變化，在作用方面，他堅持零用戶操作。而且它的參數也是機會自動補齊的。

codelayui.code

1. //eg1
2. layer.msg('只想弱弱提示');
3. //eg2
4. layer.msg('有表情地提示', {icon: 6});
5. //eg3
6. layer.msg('關閉後想做些什麼', function(){
7. //do something
8. });
9. //eg
10. layer.msg('同上', {
11. icon: 1,
12. time: 2000 //2秒關閉（如果不配置，默認是3秒）
13. }, function(){
14. //do something
15. });

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

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

codelayui.code

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);

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

type:4的深度定製。也是我本人比較喜歡的一個層類型，因爲它擁有和msg一樣的低調和自覺，而且會智能定位，即靈活地判斷它應該出現在哪邊。默認是在元素右邊彈出

codelayui.code

1. //eg1
2. layer.tips('只想提示地精準些', '#id');
3. //eg 2
4. $('#id').on('click', function(){
5. var that = this;
6. layer.tips('只想提示地精準些', that); //在元素的事件回調體中，follow直接賦予this即可
7. });
8. //eg 3
9. layer.tips('在上面', '#id', {
10. tips: 1
11. });

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

關於它似乎沒有太多介紹的必要，唯一讓你疑惑的，可能就是這個index了吧

事實上它非常容易得到。

codelayui.code

1. //當你想關閉當前頁的某個層時
2. var index = layer.open();
3. var index = layer.alert();
4. var index = layer.load();
5. var index = layer.tips();
6. //正如你看到的，每一種彈層調用方式，都會返回一個index
7. layer.close(index); //此時你只需要把獲得的index，輕輕地賦予layer.close即可
8. //當你在iframe頁面關閉自身時
9. var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
10. parent.layer.close(index); //再執行關閉

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

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

codelayui.code

1. layer.closeAll(); //瘋狂模式，關閉所有層
2. layer.closeAll('dialog'); //關閉信息框
3. layer.closeAll('page'); //關閉所有頁面層
4. layer.closeAll('iframe'); //關閉所有的iframe層
5. layer.closeAll('loading'); //關閉加載層
6. layer.closeAll('tips'); //關閉所有的tips層