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;orposition: fixed;并且您的代码段中有错字fadeIn(0)。

于 2012-04-27T10:15:39.103 回答