Javascript jQuery-让弹出框显示在屏幕上，无论它们滚动到多低

我正在尝试在一个项目列表上创建一个弹出框，该列表位于浏览器的底部

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

我必须使用绝对不固定的位置

但当我使用绝对位置时，弹出窗口总是出现在顶部，我知道它是由于我的顶部：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();
  });
});

$（'a'）。在（'click'）上，函数（e）{
var lightBox=$（“单击以删除”）；
灯箱。附加到（“主体”）；
$（'.lightbox container'）。在（'click'，函数（e）上{
$（this.remove（）；
});
});

这是我正在做的小提琴

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

这把小提琴很管用

$（'a'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
var lightBox=$（“单击以删除”）；
灯箱。附加到（“主体”）；
$（'.lightbox container'）.css（'top'，$（document.scrollTop（）+'px'）；
$（'.lightbox container'）。在（'click'，函数（e）上{
$（this.remove（）；
});
});
$（文档）.on（'scroll'，函数（）{
$（'.lightbox container'）.css（'top'，$（document.scrollTop（）+'px'）；
});

由于IE9兼容性或其他原因，您是否避免使用position fixed？使用position fixed可能是最简单的答案，然后解决您与特定浏览器的兼容性问题，例如与

编辑：我认为这有点不干净，也没有必要通过jQuery将弹出框居中。您可以很容易地用CSS实现这一点。查看我更新的JSFIDLE:编辑结束

我将溢出设置为隐藏在主体上，并在可滚动元素外部包含弹出窗口。这样，用户的滚动位置就不再重要了

JS

var lightbox=$（'.lightbox container'）；
$（'a'）。单击（函数（e）{
e、 预防默认值（）；
lightbox.show（）；
lightbox.addClass（“打开”）；
lightbox.append（“单击以删除”）；
});
灯箱。单击（功能（e）{
lightbox.removeClass（“打开”）；
lightbox.find（'p'）.remove（）；
$（this.hide（）；
});

---

请参阅JFIDLE上的rest…

我可能会晚一点，但我认为这可能更接近您的目标：

---

请注意，此方法使弹出窗口居中，并且无论滚动或重新调整大小，都将其保持居中。

另一个不错的解决方案：）Rob，你的解决方案很优雅，但对我不起作用。在JSFIDLE中，如果我单击底部的

单击我

链接，lightbox仍然会出现在页面的最顶部。只有当我开始向上滚动时，灯箱才会突然跳到查看端口的顶部。我已修复了您提到的代码，以便在显示灯箱时根据当前滚动状态自动调整。干得好。我现在可以+1你的答案了。谢谢您的修复。@RickyAhn很高兴能帮上忙，您了解它是如何工作的还是需要文档的链接？我对用于了解发生了什么的方法了解得足够多……我将花一些时间研究您的代码……谢谢！很好的例子，但我提到了一个bug，当我滚动到屏幕底部时，它会下降1px，当我转到屏幕顶部时，它会上升1px。。。有什么问题吗？@user1139767不确定您看到了什么，您使用的是什么浏览器？我使用的是FF 28.0 mac版本，对于从谷歌来到这里的任何人，使用元素上的

position:fixed

将实现这一点。OP明确表示他们不能这样做，但对于没有这种约束的人来说，这是最干净的解决方案。

$('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');
});

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

$(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);
});