标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery弹出层垂直居中效果</title>
<style>
*{ margin:0; padding:0; list-style:none; border:0;}
.imgs img{ border:0; width:200px; height:200px;}
.imgs{margin:20px;}
.zzsc {position: fixed;left: -100%;right:100%;top:0;bottom: 0;text-align: center;font-size: 0; z-index:9999; display:none;}
.zzsc:after {content:"";display: inline-block;vertical-align: middle;height: 100%;width: 0;}
.content{display: inline-block; *display: inline; *zoom:1; vertical-align: middle;position: relative;right: -100%;}
.content_mark{ width:100%; height:100%; position:fixed; left:0; top:0; z-index:555; background:#000; opacity:0.5;filter:alpha(opacity=50); display:none;}
</style>
<script type="text/javascript" src="http://luxury.bjhoutai.com/js/jquery-1.8.2.min.js"></script>
</head>
<body>
<div class="imgs">
<img src=‘http://luxury.bjhoutai.com/images/ad_auto.jpg‘ />
<img src=‘http://luxury.bjhoutai.com/images/ad_home.jpg‘ />
<img src=‘http://luxury.bjhoutai.com/images/ad_nba.jpg‘ />
<img src=‘http://luxury.bjhoutai.com/images/ad_stock.jpg‘ />
<img src=‘http://luxury.bjhoutai.com/images/ad_yuetu.jpg‘ />
</div>
<!-- 弹出层部分begin -->
<div class="zzsc">
<div class="content"><img src="http://luxury.bjhoutai.com/images/ad_home.jpg" /></div>
</div>
<div class="content_mark"></div>
<!-- 弹出层部分end -->
<script>
$(‘.imgs img‘).each(function(i) {
$(this).click(function(){
$(‘.zzsc‘).show(0);
$(‘.zzsc .content‘).children(‘img‘).attr("src",$(‘.imgs‘).children(‘img:eq(‘+i+‘)‘).attr(‘src‘));
$(‘.content_mark‘).show(0);
});
});
$(‘.content_mark‘).click(function(){
$(‘.zzsc‘).hide(0);
$(‘.content_mark‘).hide(0);
});
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/mrt-yyy/p/4449967.html
