jQuery - 彈出框出現在屏幕上，無論他們滾動多少

Question

我想創建一個彈出框的項目列表，非常到瀏覽器的底部。

我想要的彈出窗口是在頁面的中心，用戶在不管他們有多低滾動

我必須使用位置開始的絕對不是固定不變的

但是當我使用POSITION ABSOLUTE彈出總是出現在頂部，我知道它是由於我頂：0

.lightbox-container{ 
    border: solid red 1px; 
    width: 100px; 
    height: 40px; 
    background: yellow; 
    position: absolute; 
    top: 0; 
} 

我想使用類似scrollTop的或其中的一個拿到彈出始終停留在用戶的觀點方面如何少的低滾動它們

$('a').on('click', function(e){ 
    var lightBox = $('<div class="lightbox-container"> <p>click to remove</p>'); 
    lightBox.appendTo('body'); 
    $('.lightbox-container').on('click', function(e){ 
    $(this).remove(); 
    }); 
}); 

這裏是小提琴IM上http://jsfiddle.net/2RNAN/1/

我知道有這個其他職位，但即時通訊很新的jQuery的工作，並不能似乎得到它的工作。

Answer 1

我可能是有點晚了，但我認爲這可能是更接近你是什麼後：

Working Example

$(function() { 
    var lightbox = $('.lightbox-container'), 
     center = function() { 
      var T = $(window).height()/2 - lightbox.height()/2 + $(window).scrollTop(), 
       L = $(window).width()/2 - lightbox.width()/2; 
      lightbox.css({ 
       top: T, 
       left: L 
      }).click(function() { 
       $(this).hide(); 
      }); 
     }; 

    $('a').click(function (e) { 
     e.preventDefault(); 
     lightbox.show().text('Click to remove'); 
     center(); 
    }); 
    $(window).scroll(center); 
    $(window).resize(center); 
}); 

請注意，此方法將彈出窗口居中並使其居中滾動或重新調整大小。

Answer 2

這個工程工作撥弄here

$('a').on('click', function (e) { 
    e.preventDefault(); 
    var lightBox = $('<div class="lightbox-container"> <p>click to remove</p>'); 
    lightBox.appendTo('body'); 
    $('.lightbox-container').css('top', $(document).scrollTop() + 'px'); 
    $('.lightbox-container').on('click', function (e) { 
     $(this).remove(); 
    }); 
}); 
$(document).on('scroll', function() { 
    $('.lightbox-container').css('top', $(document).scrollTop() + 'px'); 
}); 

Answer 3

你避免使用的位置固定，由於IE9的兼容性還是其他原因？使用固定的位置可能是最簡單的答案，你與特定的瀏覽器，如用this answer for IE9 regarding quirks mode.

Answer 4

編輯有那麼無論地址兼容性問題：我覺得它有點不乾淨，也沒有必要居中彈出框通過jQuery。你可以用CSS輕鬆做到這一點。看看我最新的jsfiddle：http://jsfiddle.net/kCC8p/9/編輯結束

我溢出設置爲隱藏在身體上和包括彈出外的滾動的元素。這樣用戶的滾動位置就不再重要了。

JS

var lightbox = $('.lightbox-container'); 

$('a').click(function(e) { 
e.preventDefault(); 
lightbox.show(); 
lightbox.addClass('open'); 
lightbox.append('<p>Click to remove</p>'); 
}); 

lightbox.click(function(e) { 
    lightbox.removeClass('open'); 
    lightbox.find('p').remove(); 
    $(this).hide(); 
}); 

查看jFiddle休息...