<!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>遮罩弹窗居中demo</title>
</head>
<body>
<div>
<button type="button" id="ClickMe">点击显示弹窗遮罩</button>
</div>
<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>
</body>
</html>
jQuery显示弹出层
需积分: 9 201 浏览量
2016-11-08
16:12:10
上传
评论 1
收藏 49KB ZIP 举报
jQuery显示弹出层.zip （7个子文件） 
jQuery显示弹出层 css 
main.css 1001B images 
code.jpg 9KB
close.gif 1KB Thumbs.db 6KB main.css 1001B js jquery-1.8.2.min.js 91KB
index.html 3KB资源评论
