阴影框叠加点击渐隐

Question

我有这个阴影框，我想要做的是在我点击叠加层时让它消失，但现在它只有在我点击实际图像本身时才有效。我已经在代码中尝试了所有我可以但仍然没有骰子，代码如下：

$(document).ready(function(){

    $('a.shadowbox').click(function(e) {
    $('body').css('overflow-y', 'hidden'); 
    $('<div id="overlay"></div>') 
        .css('top', $(document).scrollTop())
        .css('opacity', '0') 
        .animate({'opacity': '0.9'}, 'slow')
    .appendTo('body');

    $('<div id="shadowbox"></div>')
        .hide()
    .appendTo('body');

    $('<img>')
        .attr('src', $(this).attr('href'))
        .load(function() {
            var top = ($(window).height() - $('#shadowbox').height()) / 2; 
            var left = ($(window).width() - $('#shadowbox').width()) / 2;
            $('#shadowbox') 
            .css({ 
                'top': top + $(document).scrollTop(),
                'left': left
                })
            .fadeIn();
    })
    .click(function() {
        $('#overlay, #shadowbox')
            .fadeOut('slow', function(){ 
                $(this).remove(); 
            $('body').css('overflow-y', 'auto');
            });
        })
    .appendTo('#shadowbox');
    return false;
    });
});

Answer 1

click 事件当前是$('img') 链的一部分（即 attr、load、click、appendTo）。

尝试将点击事件添加到叠加层：

$('#overlay').click(...)