基於layer外掛的小例項：彈框圖片
阿新 • • 發佈：2018-11-09
layer外掛是前端中的一個功能非常強大的外掛，它的彈框功能非常實用，是前端設計與學習必不可少的一環。
準備工作：下載layer （官網：http://layer.layui.com/）
一：圖片彈窗（先上正題再閒扯）
1.建立demo專案，將外掛放置目錄下(html檔案與imgs、js資料夾同級）
2.demo_layer.html（兩部分js程式碼可以相互註釋檢視效果哦）
<!DOCTYPE html> <html> <head> <title>彈框圖片</title> <meta charset="UTF-8"> </head> <body> <a href="javascript:;" class='show' >檢視</a> </body> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <script type="text/javascript" src="plugin/layer/layer.js"></script> <script type="text/javascript"> $(function(){ $('.show').on('click',function(){ var img = "<img src='./imgs/1.jpg' />"; layer.open({ type:1, shift: 2, shade:0, title:'檢視圖片', shadeClose:true, content:img }); }); }); <!-- $(function(){ $('.show').on('click',function(){ layer.open({ type: 1 //Page層型別 ,area: ['500px', '300px'] ,title: '你好，layer。' ,shade: 0.6 //遮罩透明度 ,maxmin: true //允許全屏最小化 ,anim: 1 //0-6的動畫形式，-1不開啟 ,content: '<div style="padding:50px;color:red;">這是一個非常普通的頁面層，傳入了自定義的html</div>' }); }); }); --> </script> </html>
3.測試（點選檢視後會彈出圖片）
二：總結
首先說明一下 layer.open() 函式中 type 的值的問題：
0：資訊框，預設值；
1：頁面層；
2：iframe層；
3：載入層；
4：tips層；
個人目前只用到了0,1,2有一些粗俗的理解：0就是 content 值是什麼就彈框什麼；1是頁面標籤，可以解析html的標籤；2是可以使用網上的資源，如網路站點，網路圖片...
過程中主要問題是路徑問題，無論是圖片還是引入都要時刻注意路徑的正確性。
文章有錯誤或問題，歡迎指出。