layer弹出图片的问题
layer下載地址：http://layer.layui.com/
jQuery下載地址：http://www.jq22.com/jquery-info122
使用layer彈框的步驟：
1.引入javascript文件(jQuery文件+layer.js,先引入iQuery文件，注意引入路徑)
2.參考官網上的demo來編寫javascript代碼
以下是我做測試的demo, 文件位置如下
?
?
下面先測試引入路徑的問題，測試layer.alert()?
<!DOCTYPE html><html><head><title>彈框</title><meta charset="UTF-8"></head><body><a href="javascript:;" class='show' >查看</a></body> <script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.js"></script> <script type="text/javascript" src="layer/layer.js"></script> <script type="text/javascript"> layer.alert('Hello world');</script> </html>?
路徑正確的話，此時的效果應為
下面來介紹layer的彈框種類
至于你要選擇哪種彈框類型，在官網上可以查看以下，然后根據自己的需要來選擇
我主要想介紹的是彈出圖片的問題，暫時選擇iframe層來使用
點擊iframe層，會出現對應的javascript代碼
? ? ?
你可以直接將對應的代碼放入javascript進行測試，將content改為?http://layer.layui.com/?，注意加 引號，否則反斜線會被轉義
想特別說明的是，type值為2才能顯示在線的內容，包括在線圖片
測試在線圖片，你可以找一個動圖，復制圖片路徑，放入content
content: 'http://img.zcool.cn/community/012d6b573bc18d6ac7253f9adca1fd.gif'
現在問題來了，如果你想顯示你本地的圖片，切記要將type值改為1,找來一張圖片放入目錄
代碼如下：
<script type="text/javascript"> // layer.alert('Hello world'); $(function(){$('.show').on('click',function(){var img = '<img src="t01e625b2921d39de4b.png">'layer.open({type: 2,//Page層類型area: ['500px', '300px'],title: '你好，layer。',shade: 0.6 ,//遮罩透明度maxmin: true ,//允許全屏最小化anim: 1 ,//0-6的動畫形式，-1不開啟content: img}); }); }); </script>如果type值為2，則會出現以下錯誤
將type改為1，本地圖片就能正常顯示了
<script type="text/javascript"> // layer.alert('Hello world'); $(function(){$('.show').on('click',function(){var img = '<img src="t01e625b2921d39de4b.png">'layer.open({type: 1,//Page層類型// area: ['500px', '300px'],title: '你好，layer。',shade: 0.6 ,//遮罩透明度maxmin: true ,//允許全屏最小化anim: 1 ,//0-6的動畫形式，-1不開啟content: img}); }); }); </script>而且將area這一屬性去掉，彈框會匹配圖片的大小
當然，我這只是用于談這一問題做的一個小測試，而如果你是做項目的話，還可以動態顯示圖片，給圖片的地址一個data屬性
在javascript中獲取到
將img給到content即可，但一定要確保圖片的路徑正確，才能正常顯示
?
?
?
?
?
?
總結
以上是生活随笔為你收集整理的layer弹出图片的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 开发针对特殊租户的Teams机器人
- 下一篇： Android（安卓）手机变砖复活的三种