版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
使用案列
后台列表数据，点击显示其二维码和相关信息。
应用知识点
- JQuery选择器
- JQuery函数两种写法
- Thinkphp中的volist标签
// html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
//隐藏的弹出层
<div style="display: none;" id="popup_layer">
<img src="">
<span></span>
<div id="btn_off">关闭</div>
</div>
//后台传来的数组数据循环显示
<table>
<volist name="dataList" id="vo">
<tr>
//数据中，id为图片编号，picture_url为图片路径
<td><a href="javascript:layerDetail({$vo['id']});" data="{$vo['picture_url']}">二维码</a></td>
</tr>
</volist>
</table>
//JQuery函数部分
<script src="__JS__/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script>
//主页面点击某条显示详情
function layerDetail(id){
var no = parseInt(id);
var url = $(this).attr('data');
$('#popup_layer img').attr('src',url);
$('#popup_layer span').html(no);
//让弹出层渐进
$("#popup_layer").stop();
$("#popup_layer").fadeIn(300);
}
//弹出层页面点击关闭按钮时，弹出层退出
$("#btn_off").click(function(){
$("#popup_layer").stop();
$("#popup_layer").fadeOut(300);
}
</script>
</body>
</html>