html代码
<!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" />
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<title>jQuery点击遮罩弹出层固定居中代码 - 站长素材</title>
</head>
<body>
<br><br><br><br><br><br><br>
<center>
<div>
<button type="button" id="ClickMe">点击显示弹窗遮罩</button>
</div>
</center>
<div id="goodcover"></div>
<div id="code">
<div class="close1"><a href="javascript:void(0)" id="closebt"><img src="images/close.gif"></a></div>
<div class="goodtxt">
<p>微信扫一扫</p>
<p>将您的团购分享到朋友圈</p>
<p>让更多朋友知道哦~</p>
</div>
<div class="code-img"> <img id="ewmsrc" src="images/code.jpg"></div>
</div>
<script>
$(function() {
//alert($(window).height());
$("#ClickMe").click(function() {
$("#code").center();
$("#goodcover").show();
$("#code").fadeIn();
});
$("#closebt").click(function() {
$("#code").hide();
$("#goodcover").hide();
});
$("#goodcover").click(function() {
$("#code").hide();
$("#goodcover").hide();
});
/*var val=$(window).height();
var codeheight=$("#code").height();
var topheight=(val-codeheight)/2;
$("#code").css("top",topheight);*/
jQuery.fn.center = function(loaded) {
var obj = this;
body_width = parseInt($(window).width());
body_height = parseInt($(window).height());
block_width = parseInt(obj.width());
block_height = parseInt(obj.height());
left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
if (body_width < block_width) {
left_position = 0 + $(window).scrollLeft();
};
top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
if (body_height < block_height) {
top_position = 0 + $(window).scrollTop();
};
if (!loaded) {
obj.css({
"position": "absolute"
});
obj.css({
"top": ($(window).height() - $("#code").height()) * 0.5,
"left": left_position
});
$(window).bind("resize", function() {
obj.center(!loaded);
});
$(window).bind("scroll", function() {
obj.center(!loaded);
});
} else {
obj.stop();
obj.css({
"position": "absolute"
});
obj.animate({
"top": top_position
}, 200, "linear");
}
}
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px "MicroSoft YaHei";">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
css代码
@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/*按钮样式*/
#ClickMe {
width: 200px;
height: 30px;
border: 1px solid #C40000;
background-color: #000;
color: #FFF;
margin:0 auto;
}
#goodcover {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 133%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: 0.50;
filter: alpha(opacity=80);
}
#code {
width: 300px;
height: 500px;
background-color: #fff;
padding: 10px;
position: absolute;
display: none;
left: 45%;
z-index: 1002;
}
.close1 {
width: 300px;
height: 60px;
}
#closebt {
float: right;
}
#closebt img {
width: 20px;
}
.goodtxt {
text-align: center;
}
.goodtxt p {
height: 30px;
line-height: 30px;
font-size: 16px;
color: #000;
font-weight: 600;
}
.code-img {
width: 250px;
margin: 30px auto 0 auto;
padding: 10px;
}
.code-img img {
width: 240px;
}
效果如：