jQuery - 屏幕上会出现弹出框，无论它们滚动的程度有多低

Question

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

我希望POPUP位于用户所在页面的中心，而不管它们滚动的程度有多低

我必须使用POSITION ABSOLUTE而不是固定

但是当我使用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很新，似乎无法让它工作。

Answer 1

这在这里起作用

$('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 2

编辑：我认为它有点不干净，也没必要通过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上的其他内容......

Answer 3

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

工作实例

$(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 4

您是否因IE9兼容性或其他原因而避免使用固定位置？ 使用固定位置可能是最简单的答案，然后解决您在特定浏览器中遇到的任何兼容性问题，例如IE9关于怪癖模式的答案。