jquery 弹出层垂直居中不动页面可滚动兼容ie6

最新推荐文章于 2021-06-29 13:26:29 发布

夏末_阳光依然耀眼

最新推荐文章于 2021-06-29 13:26:29 发布

阅读量1.1k

点赞数

分类专栏： html5+css3 div+css 文章标签： javascript jquery div ie6 html

本文链接：https://blog.csdn.net/boyit0/article/details/43195361

版权

div+css 同时被 2 个专栏收录

89 篇文章 0 订阅

订阅专栏

html5+css3

25 篇文章 0 订阅

订阅专栏

<!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>弹出层</title>
<script src="jquery.1.6.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$('.popBox em').click(function(){
		$('.popBox').fadeOut(function(){ $('#screen').hide(); });
		return false;
	});
 
	$('.btns').click(function(){
		var h = $(document).height();
		$('#screen').css({ 'height': h });	
		$('#screen').show();
		$('.popBox').center();
		$('.popBox').fadeIn();
		return false;
	});
 
});
 
//下面是居中的插件。
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': top_position, '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>
<style type="text/css">
*{
margin:0;
padding:0;
}
html{
    /*这个可以让IE6下滚动时无抖动*/
    background: url(about:black) no-repeat fixed;
}
#screen{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
display:none;
z-index:9998;
background:#000;
opacity:0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6;
}
 
.popBox{
width:600px; height:300px;
background:#fff;
border:2px #8FA4F5 solid;
padding:10px;
position:absolute;
top:0;
left:0;
display:none;
z-index:9999;
}
 
.popBox em{
padding:2px 5px;
position:absolute;
right:10px;
top:10px;
background:#333;
color:#fff;
font-style:normal;
cursor:pointer;
}
</style>
</head>

<body style="height:1000px;">

<div class="btns"><a href="javascript:;">点击</a></div>
	<div id="screen"></div>
	<div class="popBox">
        <em>关闭</em>
		这里是你想要显示的内容，略过......
	</div>

</body>
</html>

夏末_阳光依然耀眼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 弹出层垂直居中不动页面可滚动兼容ie6

弹出层$(function(){ $('.popBox em').click(function(){ $('.popBox').fadeOut(function(){ $('#screen').hide(); }); return false; }); $('.btns').click(function(){ var h = $(document).height();
复制链接

扫一扫