Actualmente, cuando hago clic en una imagen, puede aparecer y cerrarse. Sin embargo, solo se cierra cuando hago clic en la imagen emergente.

Aquí está mi código:

 $(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); }}

Busqué a través de stackoverflow y sé que muchos han hecho esta pregunta y buscaron en Google y lo intentaron pero no pudieron solucionar el problema.

¿Hay alguna manera de modificarlo para permitir que la imagen emergente se cierre cada vez que hago clic en cualquier parte de la pantalla?

Por favor ayuda. Gracias.