JQuery弹出图片及数据

最新推荐文章于 2022-08-15 15:52:31 发布

weekendd_

最新推荐文章于 2022-08-15 15:52:31 发布

阅读量427

点赞数

分类专栏： JavaScript 文章标签： JQuery

本文链接：https://blog.csdn.net/HeZhi_/article/details/99644512

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用案列

后台列表数据，点击显示其二维码和相关信息。

应用知识点

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>