jquery popup image centering

Question

好吧，所以我有一個網站，有幾個縮略圖。當我點擊一個縮略圖時，我有一個圖像在頁面上水平和垂直居中彈出。我想要的是圖像相對於瀏覽器窗口彈出，但如果我使用「固定」位置，它將不會滾動，如果它溢出通過瀏覽器窗口。這裏是我的代碼..

#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> 

我想它是這樣的.. Spoon Graphics

不管你點擊縮略圖什麼或如何靠後的頁面，你是它是相對於瀏覽器窗口，但是當位置你滾動的圖像不會滾動。

Answer 1

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; 
} 

使用方法：

center("#divid"); 

Answer 2

您可以居中的div像這樣：

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