shadow box overlay click fadeaway

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') (т.е. атр, нагрузки, нажмите, appendTo) ,

Вместо попробуйте добавить событие щелчка к накладке:

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