jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况

jquery层居中,点击小图查看大图,弹出层居中代码
http://www.cnblogs.com/simpledev/p/3566280.html

见第一版，发现一个情况，如果页面内容多出一屏的情况下，点击查看图片的时候，弹出的层图片在最上面居中，并没有在当前的滚动栏处屏幕居中。修改代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>

    <script type="text/javascript">
            $(function() {
            $(".aboutus_img").click(function(){
               
                //加入一个DIV(暗层),加入BODY中
                var background = $("<div></div>");
               
                $(background).attr("id","overlaybackground").animate({
                    'opacity':'.6'
                },0).css({
                    "width"  : $(document).width(),
                    'height' : $(document).height(),
                    'background' : '#656565',
                    'z-index' : '100',
                    'position': 'absolute',
                    'top' : '0px',
                    'left' : '0px'
                    });
                $("body").append(background);
        
               
                //将加入一个图片
                var newimage = $("<img/>");
                var width = $('body').width();

                $(newimage).attr("src",$(this).attr("src")).attr("id","largeimage").css({
                                'left' : width/2-200,
                    'top' : '160px',
                    //'position': 'absolute',
                    'position': 'fixed',
                    'z-index' : '500',
                    'display' : 'none'
                });
                $("#largeimage").attr("src",$(this).attr("src")); //重新赋予值
                $("body").append(newimage);
        
              
                //将图片滑出效果完成
                $("#largeimage").fadeIn(2000,function(){
                    $(this).click(function(){
                        $(this).fadeOut(1000);
                        $("div#overlaybackground").fadeOut(1000,function(){
                            $(this).remove();
                        })
                    })
                })
        
               
            });
        })
        </script>  
        
<style type="text/css">
#low_right
{
position: fixed;
width: 98%;
text-align: center;
}
</style>

</head>
<body>
    <div id="low_right" align="center">
        导航栏固定在顶部位置
        <img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
        <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
    </div>
    
    <br/><br/>    <br/><br/>
<img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
<img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
<img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
<img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
<img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
<br/><br/><br/><br/>
<img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
<img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
<img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
<img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
<img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
</body>
</html>

主要修改：//'position': 'absolute',
'position': 'fixed', 改成固定位置，而不是相对位置。

样式low_right控制层不管滚动栏拉到下面，层一直固定在顶部。另外：ie9浏览器如果没有顶部说明<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 这个效果出不来。在google,firefox浏览器中没有问题。