2

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

我希望 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 很陌生，似乎无法让它工作。

4

4 回答 4

4

这工作在这里工作 

$('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');
});
于 2013-09-05T17:15:28.843 回答
4

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

于 2013-09-05T17:37:24.673 回答
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);
});

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

于 2013-09-05T19:42:37.780 回答
1

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

于 2013-09-05T17:17:59.977 回答