图像叠加单击关闭

Question

I was following this fiddle link to add an overlay to make an image bigger. In it though you have to click the enlarged image again to close the overlay. I was wondering if I could reverse it and only be able to click off the image?

I would assume it's in the jquery here:

        $(".brick img").click(function() {
          $("#imgBig").attr("src", $(this).prop('src'));
          $("#overlay").show('slow');
          $("#overlayContent").show('slow');
        });

        $("#imgBig").click(function() {
          $("#imgBig").attr("src", "");
          $("#overlay").hide();
          $("#overlayContent").hide();
        });

Answer 1

From what I understood, you want it to remove the image if the user clicks the background overlay and not the image, so try this:

    $(".brick img").click(function(){                                             $("#imgBig").attr("src",$(this).prop('src'));
    $("#overlay").show('slow');
    $("#overlayContent").show('slow');
});

$("#overlay").click(function(){
    $("#imgBig").attr("src", "");
    $("#overlay").hide();
    $("#overlayContent").hide();
});
$("#overlayContent").click(function(){
    $("#imgBig").attr("src", "");
    $("#overlay").hide();
    $("#overlayContent").hide();
});
   

since the #overlay is overridden by the #overlayContent I added a 2nd function that does the same thing if the overall background area is clicked, it will remove the image, instead of having to click the image itself.