jQuery图片点击放大，弹窗查看

jQuery图片点击弹窗查看

效果

jQuery图片点击弹窗预览

代码

<div class="imglistwrap">
	<h3 class="imglisttl">《千与千寻》</h3>
	<ul class="imglist">
		<li>
			<div class="imgbox">
				<img src="img/img01.jpg" />
			</div>
			<div class="text">
				<i class="fa fa-search-plus" aria-hidden="true"></i>
			</div>
		</li>
		<li>
			<div class="imgbox">
				<img src="img/img02.jpg" />
			</div>
			<div class="text">
				<i class="fa fa-search-plus" aria-hidden="true"></i>
			</div>
		</li>
		<li>
			<div class="imgbox">
				<img src="img/img03.jpg" />
			</div>
			<div class="text">
				<i class="fa fa-search-plus" aria-hidden="true"></i>
			</div>
		</li>
		<li>
			<div class="imgbox">
				<img src="img/img04.jpg" />
			</div>
			<div class="text">
				<i class="fa fa-search-plus" aria-hidden="true"></i>
			</div>
		</li>
		<li>
			<div class="imgbox">
				<img src="img/img05.jpg" />
			</div>
			<div class="text">
				<i class="fa fa-search-plus" aria-hidden="true"></i>
			</div>
		</li>
		<li>
			<div class="imgbox">
				<img src="img/img06.jpg" />
			</div>
			<div class="text">
				<i class="fa fa-search-plus" aria-hidden="true"></i>
			</div>
		</li>
		<li>
			<div class="imgbox">
				<img src="img/img07.jpg" />
			</div>
			<div class="text">
				<i class="fa fa-search-plus" aria-hidden="true"></i>
			</div>
		</li>
		<li>
			<div class="imgbox">
				<img src="img/img08.jpg" />
			</div>
			<div class="text">
				<i class="fa fa-search-plus" aria-hidden="true"></i>
			</div>
		</li>
		<li>
			<div class="imgbox">
				<img src="img/img13.jpg" />
			</div>
			<div class="text">
				<i class="fa fa-search-plus" aria-hidden="true"></i>
			</div>
		</li>
		<li>
			<div class="imgbox">
				<img src="img/img10.jpg" />
			</div>
			<div class="text">
				<i class="fa fa-search-plus" aria-hidden="true"></i>
			</div>
		</li>
		<li>
			<div class="imgbox">
				<img src="img/img11.jpg" />
			</div>
			<div class="text">
				<i class="fa fa-search-plus" aria-hidden="true"></i>
			</div>
		</li>
		<li>
			<div class="imgbox">
				<img src="img/img12.jpg" />
			</div>
			<div class="text">
				<i class="fa fa-search-plus" aria-hidden="true"></i>
			</div>
		</li>
	</ul>
</div>

<!-- 弹窗 -->
<div class="maskweap">
	<div class="imgshow">
		<img src="" class="bigimg" />
	</div>
</div>

css

/* 公用样式 */
*{margin:0; padding:0;color:#555; font-size:12px; font-family:"microsoft yahei"; line-height:1;font-weight: normal;letter-spacing: 0.3px;list-style:none;}

/* 图片弹窗 */
.imglistwrap{width: 90%;margin: 5%;}
.imglisttl{width: 100%;text-align: center;font-size: 30px;color: #7a5656;margin-bottom: 50px;}
.imglist{width: 100%;box-sizing: border-box;box-sizing: border-box;display: flex;display: -webkit-flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.imglist li{width: 23.5%;margin-right: 2%;margin-bottom: 2%;overflow: hidden;position: relative;cursor: pointer;}
.imglist li:nth-of-type(4n){margin-right: 0;}
.imglist li .imgbox{width: 100%;overflow: hidden;height: 100%;}
.imglist li .imgbox img{display: block;width: 100%;transition: all .6s;object-fit: cover;height: 100%;}
.imglist li:hover .imgbox img{transform: scale(1.1);}
.imglist li .text{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: rgba(0,0,0,0.3);opacity: 0;transition: all .3s;display: flex;display: -webkit-flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;}
.imglist li:hover .text{opacity: 1;}
.imglist li .text i{font-size: 20px;color: #FFFFFF;opacity: 0;transition: all .3s;transform: translateY(-100%);-webkit-transform: translateY(-100%);}
.imglist li:hover .text i{opacity: 1;transform: none;-webkit-transform: none;}

/* maskweap */
.maskweap{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,0.8);display: flex;display: -webkit-flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;display: none;}
.maskweap .imgshow{width: 100%;box-sizing: border-box;height: 100%;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;}
.maskweap .imgshow img{display: block;width:auto;max-width: 70%;box-sizing: border-box;padding: 10px;background-color: #FFFFFF;}

jQuery

<script>
			$(function(){
				
				$(".imglist li").click(function(){
					// 获取当前图片的src
					var src=$(this).find(".imgbox img").attr('src');
					//添加到弹窗img
					$(".bigimg").attr("src",src);
					// 显示弹窗
					$(".maskweap").fadeIn();
				});
				// 点击盒子以外的地方弹窗关闭
				$(document).mousedown(function(e) {
					if ($(e.target).parent(".imgshow").length == 0) {
						$(".maskweap").fadeOut(); //弹窗关闭
					}
				});
			})
		</script>