如何定位弹出窗口相对于窗口顶部？

我创建了一个基本的灯箱样的东西，当点击一个缩略图时，出现一个弹出窗口。如何使用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

如何定位弹出窗口相对于窗口顶部？

回答

相关问题