Is there a way to allow the popup image to close when clicked anywhere on the screen, using JavaScript and jQuery?

Question

Currently, when i click on an image, it is able to popup and close. However it only closes when i click on the popup image.

Here is my code:

$(document).ready(eventlistener); 
function eventlistener() {
$(".img-thumbnail").click(popupImage); }   
function popupImage() {
var srcname = $(this).attr("src"); 
var newImage = srcname.replace("small", "large"); 

if ($(this).parent().children("span").children("img").hasClass("image-popup")) 
{ 
    
    $(this).parent().children("span").remove(); 
    
} else {
    var printing = "<span><img class=\"image-popup\"src=\"" + newImage + "\"></img></span>";
    $(this).after(printing); 
}}

I searched through stackoverflow and know that many have asked this question and google and tried but wasnt able to fix the issue.

Is there a way that i can modify it to allow the popup image to close whenever i click anywhere on the screen?

Please help. Thanks.