Question

我有一些代码需要调试才能手动创建灯箱：

$('.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()，则灯箱会显示在正确的位置。

还有其他人有类似的问题吗？

Answer 1

当我尝试使用jQuery偏移函数设置顶部和左侧位置时，我在IE中遇到了类似的问题。我通过先运行它来修复它，以确保它从左上角开始：

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

另外请确保它是position: absolute;或position: fixed;，并且您的摘要中已标记为fadeIn(0)。

jQuery fadeIn在IE 8的页面底部显示div

1 个答案: