0

ライトボックスを手動で作成しているデバッグするコードがいくつかあります。

$('.contact').click(function () {

            $('html').css('overflow-y', 'hidden');

            $('<div class="overlay"></div>')
                .css('top', $(document).scrollTop())
                .css('opacity', '0')
                .animate({ 'opacity': '0.5' }, 0)
                .appendTo('body');

            $('<div class="lightbox"></div>')
                .hide()
                .appendTo('body');

$('.lightbox').load(function () {
            showRecaptcha('recaptcha_div');
        });
        var top = ($(window).height() - $('.lightbox').height()) / 2;
        var left = ($(window).width() - $('.lightbox').width()) / 2;
        $('.lightbox').css({
            'top': top + $(document).scrollTop(),
            'left': left,
            'zIndex':'2000'
        }).fadeIn(0);

        return false;
    });

ライトボックスは現在画面外に表示されています。ページをズームアウトすると、左下隅に表示されます。

に変更fadeIn(0)するとshow()、ライトボックスが正しい場所に表示されます。

他の誰かがこれと同様の問題を抱えていますか?

4

1 に答える 1

1

jQueryオフセット関数で上と左の位置を設定しようとすると、IEで同様の問題が発生しました。これを最初に実行して、左上から開始するように修正しました。

$(".lightbox").offset({top: 0, left: 0});

また、それがposition: absolute;orであり、スニペットposition: fixed;にタイプミスがあることを確認fadeIn(0)してください。

于 2012-04-27T10:15:39.103 に答える