版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/boyit0/article/details/81323175
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>jQuery弹出层垂直居中效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0; width: 100%; }
.imgs{ width:200px; height:200px; cursor:pointer;}
.zzsc{position:absolute;left: 10%;right:10%;top:10%;bottom:10%;text-align: center;font-size: 0; z-index:9; display:none;}
.content{display: inline-block; *display: inline; *zoom:1; vertical-align: middle;position: relative;background:#fff; padding:5px; bottom: 10.5%;}
.content>b{ position: absolute; right: -32px; top: 0; font-size: 20px; display: block; width: 32px; height: 32px; background:#fff; color: #333; cursor: pointer; }
.content img{ max-width: 100%; width: auto; }
.content_mark{ width:100%; height:100%; position:fixed; left:0; top:0; z-index:5; background:#000; opacity:0.5;filter:alpha(opacity=50); display:none;}
</style>
</head>
<body>
<div class="imgs">
<img src="images/zzsc.jpg" />
</div>
<!-- 弹出层部分begin -->
<div class="zzsc">
<div class="content">
<b>×</b>
<img src="images/11eb09363f6e459c08d4a6b81c9d5c4b.jpg" />
</div>
</div>
<div class="content_mark"></div>
<!-- 弹出层部分end -->
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('.imgs').click(function(){
$('.zzsc').show(0);
$('.content_mark').show(0);
});
$('.content_mark,.content>b').click(function(){
$('.zzsc').hide(0);
$('.content_mark').hide(0);
});
});
</script>
</body>
</html>