javascript - jQuery - 无论滚动多低，屏幕上都会出现弹出框

Question

我正在尝试在非常靠近浏览器底部的元素列表上创建一个弹出框。

我希望 POPUP 位于用户所在页面的中心，无论他们滚动到多低

我必须使用 POSITION ABSOLUTE not FIXED

但是当我使用 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();
  });
});

这是我正在处理 http://jsfiddle.net/2RNAN/1/ 的 fiddle

我知道还有其他关于此的帖子，但我对 jquery 还很陌生，似乎无法让它工作。

Answer 1

这个工作 fiddle 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');
});