如何定位彈出窗口相對於窗口頂部？

我創建了一個基本的燈箱樣的東西，當點擊一個縮略圖時，出現一個彈出窗口。如何使用jQuery檢測頂部位置，所以當彈出式div出現時，它總是例如窗口頂部200px？如何定位彈出窗口相對於窗口頂部？

$('#thumbs img').click(function(){ 
    $('.popup').fadeIn(300); 
    $('#dark-overlay').fadeIn(300); 
}); 

$('#dark-overlay').click(function(){ 
    $(this).fadeOut(300); 
    $('.popup').hide(); 
});

實施例：http://jsfiddle.net/EXT4H/1/

來源

2013-08-18 user2556272

我不完全確定你的意思，但'position：fixed'可能會這樣做。 – 2013-08-18 15:02:58

我希望彈出窗口相對於窗口的可視區域顯示200px。問題在於，如果您點擊第五個縮略圖，彈出窗口會出現在文檔的頂部，並且不會看到 – user2556272

下面是工作的jsfiddle：http://jsfiddle.net/kcG9W/。您需要計算窗口的滾動偏移量，這會使頂部看起來像0px，然後將200加到頂部，以便頂部看起來像是200px。

$('#thumbs img').click(function(){ 
    $('.popup').fadeIn(300); 
    $('#dark-overlay').fadeIn(300); 
    var top = $(window).scrollTop() + 200 + 'px'; 
    $('.popup').css({top:top}); 
});

來源

2013-08-18 15:05:44 twinlakes

太棒了，這就是我的意思！謝謝！ – user2556272

如何定位彈出窗口相對於窗口頂部？

回答

相關問題