Why is my overlay not exiting when being clicked on?

Question

So I did some updates on my website today, and took away my caption for my overlay. I felt I didn't need it. I commented out said code for now, to test whether or not I liked it. I do like just the image overlay without the text, but now I can't exit the overlay by clicking again on it. Why is this? Here's my repo for code source. Below is my js code for it as well.

/*************************************************************
            Gallery Lightbox On Stories Page
**************************************************************/

//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
// var $caption = $("<p></p>");

// An image to overlay
$overlay.append($image);

// A caption to overlay
// $overlay.append($caption);

// Add overlay
$("body").append($overlay);

// Capture the click event on a link to an image
$(".gallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  // Update overlay with the image linked in the link
  $image.attr("src", imageLocation);

  // Show the overlay.
  $overlay.show();


  // Get child's alt attribute and set caption
//  var captionText = $(this).children("img").attr("alt");
//  $caption.text(captionText);
// }); 

// When overlay is clicked
$overlay.click(function(){
  // Hide the overlay
  $overlay.hide();
});

/*************************************************************
           Hide Email Using Javascript To Avoid Spam 
**************************************************************/
//var parts = ["lpstories", "yahoo", "com", "&#46;", "&#64;"];
//var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
//document.getElementById("email").innerHTML=email;

Answer 1

1. You are using the image path as href in your tag. Use data-attributes instead.
2. Missing }) after $overlay.show()

Use this code.

    /*************************************************************
            Gallery Lightbox On Stories Page
**************************************************************/

//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
// var $caption = $("<p></p>");

// An image to overlay
$overlay.append($image);

// A caption to overlay
// $overlay.append($caption);

// Add overlay
$("body").append($overlay);

// Capture the click event on a link to an image
$(".gallery a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("data-href");
// Update overlay with the image linked in the link
$image.attr("src", imageLocation);

// Show the overlay.
$overlay.css("display","flex");

});
// Get child's alt attribute and set caption
//  var captionText = $(this).children("img").attr("alt");
//  $caption.text(captionText);
// }); 

// When overlay is clicked
$overlay.click(function(){
// Hide the overlay
$overlay.hide();
});

/*************************************************************
        Hide Email Using Javascript To Avoid Spam 
**************************************************************/
//var parts = ["lpstories", "yahoo", "com", "&#46;", "&#64;"];
//var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
//document.getElementById("email").innerHTML=email;

It is also centering the image in a popup.

Here is the working fiddle for the same.

Add this if you don't want to close the popup on image click.

$overlay.find("img").click(function(e){
 e.stopImmediatePropagation();
});