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

刺骨的言语ヽ痛彻心扉 2022-08-06 13:15 137阅读 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>