前言：學習layer彈出框，之前項目是用bootstrap模態框，后來改用layer彈出框，在文章的后面，我會分享項目的一些代碼(我自己寫的)。

layer至今仍作為layui的代表作，她的受眾廣泛并非偶然，而是這五年多的堅持，不斷完善和維護、不斷建設和提升社區服務，使得猿們紛紛自發傳播，乃至于成為今天的Layui最強勁的源動力。目前，layer已成為國內最多人使用的web彈層組件，GitHub自然Stars3000+，官網累計下載量達30w+，大概有20萬Web平臺正在使用layer。 具體請移步layer官網，http://www.layui.com/doc/modules/layer.html

這篇博客會引用官網的一些內容，主要是寫寫layer的一些難點。比如如何用layer打開一個新的網頁，content直接為一個網址就可以了，但是在你的項目中，這個網址又是啥??HTML的直接路徑? 相對路徑??都不是!! layer如何獲取父界面的元素，比如我點擊新增按鈕，在layer框編輯后提交，是如何關閉當前layer框，額，關閉layer框很簡單，但是如何關閉后根據父界面的form表單向后臺發起Ajax請求，，刷新信息。即：layer子界面如何調用父界面的方法。

如果你不想使用Layui，而只是想使用layer，你可以去layer獨立組件官網下載組件包。你需要在你的頁面引入jQuery1.8以上的任意版本，并引入layer.js。

<script src="jQuery的路徑"></script><script src="layer.js的路徑"></script><script>//彈出一個頁面層$('#test2').on('click', function(){ layer.open({ type: 1, area: ['600px', '360px'], shadeClose: true, //點擊遮罩關閉 content: '/</div style="padding:20px;">自定義內容/<//div>' });});</script>

title - 標題

類型：String/Array/Boolean，默認：'信息'

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

content - 內容

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

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

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