const dialog = document.querySelector("dialog");

const closeDialog = (e) => {
    e.stopPropagation();
    console.log("close")
    dialog.close();
    document.body.removeEventListener("click", closeDialog);
}

const showLightbox = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const img = dialog.querySelector("img");
    img.src = e.currentTarget.src;
    img.alt = e.currentTarget.alt;
    dialog.querySelector("p").textContent = e.currentTarget.alt;
    dialog.showModal();
    document.body.addEventListener("click", closeDialog, false);
}
document.querySelectorAll("article img").forEach((img) => {
    img.addEventListener("click", showLightbox);
})