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/

上工作的小提琴

我知道还有其他帖子关于这个但是我对jquery很新，似乎无法使它工作。

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

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

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

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 4

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

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

4 个答案: