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

Question

I'm trying to create a popup box on a list of items that goes very much to the bottom of the browser.

I want the POPUP to be in the center of the page where the user is at regardless of how low they scrolled

i have to use POSITION ABSOLUTE not FIXED

but when i use POSITION ABSOLUTE the popup always appears on top and i know its due to my top: 0

.lightbox-container{
  border: solid red 1px;
  width: 100px;
  height: 40px;
  background: yellow;
  position: absolute;
  top: 0;
 }

I want to use something like scrollTop or one of those to get the popup to always stay in the users viewpoint regardless of how low they scrolled

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

here is the fiddle im working on http://jsfiddle.net/2RNAN/1/

I know there are other posts about this but im very new to jquery and cant seem to get it working.

Answer 1

This works working fiddle 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

Edit: I think its a bit unclean and also unnecessary to center the pop-up box via jQuery. You can easily do this with CSS. Check out my updated JsFiddle: http://jsfiddle.net/kCC8p/9/ Edit End

I set the overflow to hidden on the body and included the pop-up outside the scrollable element. This way the scroll position of the user doesn't matter anymore.

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

See rest on jFiddle...

Answer 3

I may be a little late but I think this might be closer to what you were after:

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

Note that this method centers the popup and keeps it centered regardless of scrolling or re-sizing.

Answer 4

Are you avoiding the use of position fixed due to IE9 compatibility or some other reason? Using position fixed is probably the simplest answer and then address whatever compatibility issue you're having with specific browsers, such as with this answer for IE9 regarding quirks mode.