2

ブラウザの一番下にある項目のリストにポップアップ ボックスを作成しようとしています。

スクロールの低さに関係なく、ユーザーがいるページの中央に POPUP を配置したい

FIXEDではなく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に非常に慣れていないため、うまく機能していないようです。

4

4 に答える 4

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 に答える