0

我正在尝试使用带有 jquery 的关闭函数来关闭弹出 DIV，它在我添加 DIV 的位置函数之前起作用，而我所做的事情一定破坏了该函数......我猜这是一个语法错误在某个地方，有一双愿意看一看的新鲜眼睛吗？

工作地点位于 www.masterfade.com/maptest

这是代码：

$(document).ready(function () {

    $('.lightbox').click(function (event) {
        event.preventDefault();
        $('.backdrop, #box').animate({
            'opacity': '.50'
        }, 300, 'linear');
        $('#box').animate({
            'opacity': '1.00'
        }, 300, 'linear');
        $('.backdrop, #box').css('display', 'block');
    });

    $('.lightbox2').click(function (event) {
        event.preventDefault();
        $('#box2').css({
            left: function () {
                return event.pageX - $(this).width();
            },
            top: function () {
                return event.pageY - $(this).height();
            }
        });
        $('.backdrop, #box2').animate({
            'opacity': '.50'
        }, 300, 'linear');
        $('#box2').animate({
            'opacity': '1.00'
        }, 300, 'linear');
        $('.backdrop, #box2').css('display', 'block');
    });
});

$('.backdrop, #box2').animate({
    'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
    'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');


$('.close').click(function () {
    close_box();
});

$('.backdrop').click(function () {
    close_box();
});



function close_box() {
    $('.backdrop, #box, #box2').animate({
        'opacity': '0'
    }, 300, 'linear', function () {
        $('.backdrop, #box, #box2').css('display', 'none');
    });
}
4

2 回答 2

0

所以，

我浏览了您的网站，并使用Google Chrome 开发人员工具（控制台）手动调用了它$('.lightbox').click()，close_box()并且它似乎作为例外工作并且没有抛出任何 javascript 异常。

但是，我不确定您是否了解什么不起作用。

我强烈建议您使用带有开发者工具的 Chrome 浏览器，这将使您在 Web 开发方面的生活更加轻松。

使用它，您可以监控 javascript 错误并逐行调试您的代码。

祝你好运

于 2013-10-13T11:48:31.943 回答
0

我认为您的事件绑定和动画函数是在 DOM 元素加载之前调用的。所以事件绑定将不起作用。

我希望以下代码能够工作。

$(document).ready(function () {

    $('.lightbox').click(function (event) {
        event.preventDefault();
        $('.backdrop, #box').animate({
            'opacity': '.50'
        }, 300, 'linear');
        $('#box').animate({
            'opacity': '1.00'
        }, 300, 'linear');
        $('.backdrop, #box').css('display', 'block');
    });

    $('.lightbox2').click(function (event) {
        event.preventDefault();
        $('#box2').css({
            left: function () {
                return event.pageX - $(this).width();
            },
            top: function () {
                return event.pageY - $(this).height();
            }
        });
        $('.backdrop, #box2').animate({
            'opacity': '.50'
        }, 300, 'linear');
        $('#box2').animate({
            'opacity': '1.00'
        }, 300, 'linear');
        $('.backdrop, #box2').css('display', 'block');
    });


    $('.backdrop, #box2').animate({
        'opacity': '.50'
    }, 300, 'linear');
    $('#box2').animate({
        'opacity': '1.00'
    }, 300, 'linear');
    $('.backdrop, #box2').css('display', 'block');

    // following lines are edited

    $('.close,.backdrop').click(close_box);

    function close_box() {
        $('.backdrop, #box, #box2').animate({
            'opacity': '0'
        }, 300, 'linear', function () {
            $('.backdrop, #box, #box2').css('display', 'none');
        });
    }
});
于 2013-10-13T12:18:56.163 回答