前言

Layer一個讓你想到即可做到的Web彈窗/層的解決方案，layer是一款近年來備受青睞的web彈層元件，她具備全方位的解決方案，致力於服務各水平段的開發人員，您的頁面會輕鬆地擁有豐富友好的操作體驗。

使用方法

先給出官方文件地址（給出了大量的示例和參考程式碼）：http://layer.layui.com/

輕鬆上手3步曲~~~

1.下載外掛

2.放置外掛

3.引用外掛

程式碼+演示

layer.alert();

layer.alert("這是一個alert彈出層！");

以上是一個很簡單的alert視窗，但我們可以對它的顯示介面進行自定義，比如這個視窗的標題，預設顯示的是“資訊”，如果我想修改它，可以這樣做。

layer.alert("這是一個alert彈出層！",{title:'這是一個新的標題'});

如果還不滿意，覺得介面不夠美觀，我們可以為內容加個表情標識。（0-6的可選效果自行體驗）

layer.alert("這是一個alert彈出層！",{title:'這是一個新的標題',icon:1});

layer.msg();

layer.msg("這是一個msg彈出層！");

這個彈出層較前面的彈出層更為簡約，沒有確定按鈕也沒有取消按鈕（實際上是可以自定義新增的，下面會演示），彈出層到達預設顯示時間自動銷燬，如果不想讓它銷燬一直顯示在頁面上，我們可以這麼做。

layer.msg("這是一個msg彈出層！",{time:0});

time屬性代表當前彈出層的銷燬時間，0代表永不銷燬，如上這樣，這個彈出層會一直顯示（除非你重新整理或關閉頁面），該屬性單位為毫秒。

除了可以自定義銷燬時間，那我能不能給他加個按鈕，主動讓這個彈出層去銷燬呢，答案是可以的。

layer.msg("這是一個msg彈出層！",{time:0,btn:['我知道了']});

我是否可以不通過按鈕去關閉它，給它的彈出層的右上角加個關閉？答案，也是可以的。

layer.msg("這是一個msg彈出層！",{time:0,closeBtn:true});

layer.confirm();

layer.confirm("我是程式設計師？",{btn:['當然是','我不是']});

顯然這樣做沒什麼意義，那我們是否可以增加點選按鈕後的函式呢，當然可以！

layer.confirm("我是程式設計師？", {
		btn : [ '當然是', '我不是' ]
	}, function() {
		layer.msg('您選擇了當然是');
	}, function() {
		layer.msg('您選擇了不是');
	});

layer.prompt();

layer.prompt({title:'請輸入您的年齡'},function(txt,index){
		layer.close(index);
		if(txt == 18){
			layer.msg('您真的像花一樣！');
			return;
		}
		layer.msg('原來你不是18歲！');
	});

請注意回撥函式的使用，不再贅述。

layer.tips();

layer.tips('您發現了新大陸','.btn-primary');

layer.tab();

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

結束

篇幅有限，還有很多有意思的屬性引數沒有介紹，大家自己摸索，參照官方文件就行。

想看更多引數屬性，請點我