layer弹出图片的问题
layer下載地址：http://layer.layui.com/
jQuery下載地址：http://www.jq22.com/jquery-info122
使用layer彈框的步驟：
1.引入javascript文件(jQuery文件+layer.js,先引入iQuery文件，注意引入路徑)
2.參考官網(wǎng)上的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>?
路徑正確的話，此時(shí)的效果應(yīng)為
下面來介紹layer的彈框種類
至于你要選擇哪種彈框類型，在官網(wǎng)上可以查看以下，然后根據(jù)自己的需要來選擇
我主要想介紹的是彈出圖片的問題，暫時(shí)選擇iframe層來使用
點(diǎn)擊iframe層，會(huì)出現(xiàn)對應(yīng)的javascript代碼
? ? ?
你可以直接將對應(yīng)的代碼放入javascript進(jìn)行測試，將content改為?http://layer.layui.com/?，注意加 引號(hào)，否則反斜線會(huì)被轉(zhuǎn)義
想特別說明的是，type值為2才能顯示在線的內(nèi)容，包括在線圖片
測試在線圖片，你可以找一個(gè)動(dòng)圖，復(fù)制圖片路徑，放入content
content: 'http://img.zcool.cn/community/012d6b573bc18d6ac7253f9adca1fd.gif'
現(xiàn)在問題來了，如果你想顯示你本地的圖片，切記要將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的動(dòng)畫形式，-1不開啟content: img}); }); }); </script>如果type值為2，則會(huì)出現(xiàn)以下錯(cuò)誤
將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的動(dòng)畫形式，-1不開啟content: img}); }); }); </script>而且將area這一屬性去掉，彈框會(huì)匹配圖片的大小
當(dāng)然，我這只是用于談這一問題做的一個(gè)小測試，而如果你是做項(xiàng)目的話，還可以動(dòng)態(tài)顯示圖片，給圖片的地址一個(gè)data屬性
在javascript中獲取到
將img給到content即可，但一定要確保圖片的路徑正確，才能正常顯示
?
?
?
?
?
?
總結(jié)
以上是生活随笔為你收集整理的layer弹出图片的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 开发针对特殊租户的Teams机器人
- 下一篇： Teams App抽奖机器人 - 基础架