從酒店管理系統到智能門鎖及其現在的資源共享平台，layui框架，我們團隊用的比較多的就是這個layui彈出層。
layui彈出層，除了頁面iframe層我們比較常用還有就是表單校驗和其他相關的友好提示信息。
通常比較常用的方式是layui+jQuery，layui主要引用layui相關的js和css文件，jQuery的話，通常就是兩個版本，壓縮版和源碼版，壓縮版就像我們Java沒有用maven那樣，就是一個一個的jar文件，如果我們想看源碼，就必須找到對應的源文件。源文件通常情況下比jar包式的文件要大的多。就好比我們部署web工程，特別是使用maven項目的時候，通過打包，將war項目打成war包，由上百兆變成十幾兆。
當然了，使用壓縮版，且建議使用壓縮版，生產環境一定要使用壓縮版，壓縮版壓縮版，看這詞，肯定和源碼版相比，體積要小的多。
目前很多企業的軟件，很多都包含這么幾端，瀏覽器端，客戶端或者電腦端等，無論是瀏覽器端、客戶端、電腦端，它們都要用的一個玩意，換言之遵守一個規則，即HTTP請求的規則。
《高性能網站建設指南》中提出了關於網站性能優化十個點，其中就包括減少Http請求，而且我認識的朋友中，有不少他們公司要么是使用CDN將所有的靜態資源放在CDN上，當然了，有的放在CDN上是幾個文件的壓縮版，比如相關的4到5個css文件，但是很多頁面都引用，而且它並沒有很多變動，基本不動，這種情況我們使用YUI壓縮技術或者其他壓縮技術，將其壓縮成一個css文件，當然文件體積比較大，但是相對於請求4到5個css靜態文件，也就是請求4到5個http請求來說，相對比請求一個，響應時間要少的多，響應時間一少，用戶體驗也就好了。而且對於web性能方面還是很有幫助的。
當然了，體積大占用的帶寬也會比較大，所有這也是建議使用壓縮版。體積小，占用帶寬少，功能也並無差別。當然了，像個人學習或者測試環境可以使用源碼版的。
layui的彈出層也可以幫助我們性能優化，它可以使頁面上的html相關的標簽減少，從而使整個文件減少，這樣一來html文件雖然多，但是並不是全部在一個頁面上，要知道很多iframe在一塊，真的不利於維護，或者維護起來比較困難，通過layui倒可以將一些比如添加的form表單或者是增加編輯信息之類的抽取出來為一個界面，利於維護，也利於性能。
下面說說，layui我常用的幾個彈出層:
首先貼一下layui的官網:http://www.layui.com/
layui的下載和文檔上面都有，對於一些公司技術調研方面，通常會比較以下:
(1)社區是否活躍;
(2)文檔是否豐富;
(3)風險是否可控;
layui基本滿足以上原則，社區很活躍，文檔也非常豐富，至於風險，很多開源項目和我認識的朋友們，他們公司也在用這個框架，既然這么多人都在用，那么我想風險方面一定也是可控的。
注意一點:
一定要在layui.use('layer',function(){}函數作用域內加上var layer=layui.layer
就好像你要使用jQuery的ajax那樣，加上$.ajax或者$.post、$.get
$相當於是jQuery，只是給它起了個別名
這樣說好像有點欠妥，再補充一點，就好比Java或者js,你要使用這個變量並給其賦值，前提是必須有，這個“有”，可以理解為聲明。
Java對於變量，流行這樣一句，先聲明再賦值，邊聲明邊賦值。js同樣如此。
再打比方:
比如Java類中，寫了多個方法，那么你如果可以調用這個方法呢？出來將方法用static修飾之外，以類名調用方法，還有就是實例化，換言之就是New
layui也是這個道理，你如果想要用它的彈出層相關的一系列方法，就必須要聲明賦值才行。不然就無法調用。
代碼講解
1. layer.msg
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('消息001');
});
這個通常用於消息提示，比如退房推送，比如做酒店系統時，有人退房了，通過它提醒酒店店長及其相關人員，說某某在某時刻退房了，這時收到通知就可以通知對應的清潔人員去打掃，當然了，現在手機發短信的形式非常流行，至於退房推送不必通過layer.msg來提示，不過作為后台系統而言，有人退房的話，經理或者其他的管理人員，需要及時在web界面上看到，這時layer.msg就可以起到作用。
當然了，也可以用於表單校驗。
layer.msg('參數自定義', {
time: 1500, //1.5s后自動關閉
btn: ['明白了', '知道了', '哦']
});
這個可以讓人聯想到，比如你的好友評論你的文章或者你的好友上線下線，又或者某某個點贊了你的說說等，直接就會彈出來，當然了比如中說的就是事件，當然得觸發事件才行。不然的話就成死循環了。
time這個屬性在這里的作用是信息時間定義，就是msg顯示在屏幕上多長時間，不寫默認是2秒。根據自己需求而定。
2.layer.open
layui.use('layer', function(){
var layer = layui.layer;
layer.open({
type: 2,
title: 'iframe',
fix: false,
maxmin: true,
shadeClose: true,
shade: 0.8,
area: ['1000px', '700px'],
content: 'https://www.baidu.com',
end: function () {
location.reload();
}
});
});
這個通常的可以用於減少HTML大量的標簽，這讓我想到了Bootstrap,Bootstrap的響應式，我是沒話說，滿意+非常滿意，但是它的那個模態框我不喜歡，有的時候，我的界面需要好幾個模態框這樣的，但是如果加上了，即便是有注釋，簡單的說吧，如果div嵌套的少，那還好說，如果div加上個選項卡，選項卡里面又套div，而且又是好幾個，這樣就不能使用模態框了，當然bootstrap實現這個也很簡單，但是對於頁面來說，加入了很多HTML，即便有注釋，也會使頁面的復雜性增加，不利於維護，這時layui的功效來了，通過layer.open可輕松的將模態框分離為一個界面這樣頁面不利於維護的問題也就解決了。而且用戶體驗也非常好。
layui.use('layer', function(){
var layer = layui.layer;
layer.open({
type: 1,
area: ['200px', '100px'],
content: '<p align="center">消息003</p>' //這里content是一個普通的String
});
});
layer..open的type有5種類型:
0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層)
我個人用的比較的還是信息框和頁面層及其iframe層，當然了加載層也用，至於tips層基本沒用過。沒用過也不能說沒有用。
3.lay.alert
layui.use('layer', function(){
var layer = layui.layer;
layer.alert('test', {icon: 1});
});
這個可以說是alert強化版本，alert在原始的js中也就是起到提示信息的作用，比如表單校驗就比較常用。
4.layer.prompt
layer.prompt(function(value, index, elem){
alert(value); //得到value
layer.close(index);
});
layer.prompt({
formType: 2,
value: '初始值',
title: '請輸入值',
area: ['800px', '350px'] //自定義文本域寬高
}, function(value, index, elem){
alert(value); //得到value
layer.close(index);
});
提示用戶輸入的提示框，和原本的js中的prompt一樣。只是功能更強大了。
通常可以應用於用戶評論文章
5.layer.tab
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '內容1'
}, {
title: 'TAB2',
content: '內容2'
}, {
title: 'TAB3',
content: '內容3'
}]
});
選項卡就不說了，之前提到過，layer.tab+layer.open結合起來更強大。
小結:
框架，無論是前端框架或者后端框架，框架的目的只有一個更好更快更方便。
這與奧林匹克的格言:“更快、更高、更強”不謀而合。