Cuando hago clic en una imagen, la ventana emergente no parece funcionar y tampoco hay mensajes de error. Busqué en google ejemplos pero no funciona.

Aquí está mi código javascript:

 function eventHandlers(){ $(".img-thumbnail").click(togglePopup);} function togglePopup(e){ var popup = document.getElementById("id_popup"); if (popup === null) { popup = document.createElement("span"); popup.id = id_popup; popup.setAttribute("class","image-popup"); var thumbnail = e.target; var small_image = thumbnail.src; var large_image = small_image.replace("_small","_large"); popup.innerHTML = '<img src=' + large_image + '>'; thumbnail.insertAdjacentElement("afterend",popup); } else { $('#' + id_popup).remove(); }}

Código en el archivo principal:

 <figure> <img src="images/test.jpg" class="img-thumbnail" alt="Test" title="View larger image..."/> <span id="id_popup" <span id="id_popup" class="image-popup"></span> <figcaption>Standard Test</figcaption> </figure>

Y mi código css:

 .image-popup { border: 5px solid lightgrey; margin-left: 25%; margin-top: -60%; height: 40vh;}

Además, ¿hay alguna manera de modificar mi archivo javascript para permitir que la ventana emergente se cierre cuando se hace clic en cualquier lugar de la pantalla?

La ayuda será muy apreciada. Gracias.