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

【问题标题】：jQuery - have popup box appear on screen regardless of how low they scrolljQuery - 无论滚动多低，屏幕上都会出现弹出框
【发布时间】：2013-09-05 17:10:30
【问题描述】：

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

无论用户滚动多低，我都希望 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/

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

【问题讨论】：

对于从 Google 来到这里的任何人，在元素上使用 position: fixed 即可实现此目的。 OP 明确表示他们不能这样做，但对于没有这种限制的人来说，这是最干净的解决方案。

标签： javascript jquery html css jquery-ui

【解决方案1】：

这工作小提琴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');
});

【讨论】：

Rob，您的解决方案很优雅，但对我不起作用。在 jsFiddle 中，如果我单击底部的 Click Me 链接，灯箱仍会出现在页面的最顶部。 只有当我开始向上滚动时，灯箱才会突然跳到视口的顶部。
我已经修复了您提到的代码，以便在显示灯箱时根据当前滚动状态自动调整。
干得好。我现在可以 +1 你的答案。感谢您解决这个问题。

【解决方案2】：

编辑：我认为它有点不干净，也没有必要通过 jQuery 将弹出框居中。您可以使用 CSS 轻松做到这一点。查看我更新的 JsFiddle：http://jsfiddle.net/kCC8p/9/ Edit End

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

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 上查看休息...

【讨论】：

另一个不错的解决方案:)

【解决方案3】：

我可能有点晚了，但我认为这可能更接近你所追求的：

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

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

【讨论】：

@RickyAhn 很高兴为您提供帮助，您了解它的工作原理还是需要文档链接？
我对用来了解正在发生的事情的方法有足够的了解......我会花一些时间研究你的代码......谢谢！
很好的例子，但我提到了 1 个错误，当我滚动到屏幕底部时，它会下降 1px，当我转到屏幕顶部时，它会上升 1px...有问题吗？
@user1139767 不确定您看到了什么，您使用的是什么浏览器？
我使用的是FF 28.0 mac版

【解决方案4】：

您是否因为 IE9 兼容性或其他原因而避免使用位置固定？使用位置固定可能是最简单的答案，然后解决您在特定浏览器中遇到的任何兼容性问题，例如this answer for IE9 regarding quirks mode.

【讨论】：