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關於怪癖模式的答案。