Lightbox/Overlay not working properly

//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);

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

//Capture the click event on a link to an image
$("#imageGallery 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();
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);

  //Get child's alt attribute and set caption


});

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

My CSS:
#overlay {
  background:rgba(0,0,0,0.7);
  width: 100%;
  height:100%;
  position:absolute;
  top:0;
  left: 0;
  text-align:center;

}

#overlay img {
  margin-top: 10%;
}

#overlay p {
  color: white;  
}