jquery popup image centering

ok so 开发者_C百科I have a site that has several thumbnails. When I click a thumbnail I have an image that pops up centered horizontally and vertically on the page. What I want is for image to pop up relative to the browser window but if I use position "fixed" it won't scroll if it overflows past the browser window. Here is my code..

#popup_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1400px;
z-index: 201;
display: none;
background-repeat: no-repeat;
background-position: center center;
background-image: url(images/fullgraphic3.jpg);
}

<div id="popup_image">
</div>

I would like it something like this.. Spoon Graphics

No matter what thumbnail you click or how far down the page you are it is position relative to browser window but when you scroll the image doesn't scroll too.

function center(divid) {
    $(divid).css("position","absolute");
    $(divid).css("top", (($(window).height() - $(divid).outerHeight()) / 2) + $(window).scrollTop() + "px");
    $(divid).css("left", (($(window).width() - $(divid).outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

Use method:

center("#divid");

You can center divs like so:

CSS

.popup {
    background:#AAA;
    display:inline;
    float:left;
    height:100px;
    position:fixed;
    width:auto;
    z-index:9999;
}

JS

$(function PopUp(){
    $('.popup').each(function(){
        $(this).css('left',($(window).width()-$(this).outerWidth())/ 2 + 'px');
        $(this).css('top',($(window).height()-$(this).outerHeight())/ 2 + 'px');
    });
});

Demo