基于layer插件的小实例：弹框图片
程序员文章站
2022-07-02 14:26:35
...
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是可以使用网上的资源，如网络站点，网络图片...
过程中主要问题是路径问题，无论是图片还是引入都要时刻注意路径的正确性。
文章有错误或问题，欢迎指出。
上一篇： Tkinter设置消息框、对话框
下一篇： Angular与模态框的通讯