<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验车照片</title>
<style>
/*图片弹框 start*/
.img_bgc{
position: fixed;
display: none;
bottom: 0px;
top: 0px;
left: 0px;
right: 0px;
background-color: rgba(0,0,0,1);
}
.img_bgc .bg_whi{
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top: 30%;
}
.img_bgc img{
padding-top: 20px;
margin: 0 auto;
height: 50%;
}
.img_bgc p{
color: white;
font-size: 1.5rem;
text-align: center;
padding-top:10px ;
}
a:hover, a:focus {
color: white;
text-decoration: none;
}
/*图片弹框 end*/
</style>
</head>
<body>
<div class="banner1 ">
<span style="display:block; border-bottom: 1px solid #888888;padding-bottom: 40px;width: 100%">验车照片</span>
<ul >
<li>
<ul class="w photo">
<li >
<img class="clickBtn" src="/<{$img.contract_img}>">
</li>
<li class="time_car">
21
</li>
<li class="time_car">
21
</li>
</ul>
</li>
<{/volist}>
</ul>
<!--点击 微信 start-->
<div class="pop img_bgc" onmouseup="mu(event)">
<div class="bg_whi">
<img id="big_bgc" src="/<{$img.contract_img}>">
</div>
</div>
<!--点击 微信 end-->
</div>
</body>
<script src="__H5ADD__/js/jquery-1.12.4.js"></script>
<script>
$(function() {
$(".clickBtn").click(function() {
$(".pop").show();
var url =$(this).attr("src")
$("#big_bgc").attr("src",url)
});
// $(".pop").click(function() {
// $(".pop").hide();
// });
$(document).bind("click", function(e) {
var target = $(e.target);
if (target.closest(".pop,.clickBtn").length == 0) { /*.closest()沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止，返回包含零个或一个元素的 jQuery 对象。*/
$(".pop").hide();
};
e.stopPropagation();
})
})
function mu(e){
setTimeout(function(){
$(".pop").hide();
},500)
setTimeout(function(){
$(".pop").click(function() {
$(".pop").show();
});
},2000)
}
</script>
</html>
