轉載：https://blog.csdn.net/qq_41815146/article/details/81141088
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即可，但一定要確保圖片的路徑正確，才能正常顯示
--------------------- 本文來自 玥娃娃 的CSDN 博客 ，全文地址請點擊：https://blog.csdn.net/qq_41815146/article/details/81141088?utm_source=copy