<dialog id="imageModal">
  <button id="closeImageModal">Close</button>
</dialog>

<script>
  const images = document.querySelectorAll('.image-gallery img')
  const imageModal = document.getElementById('imageModal')
  const closeImageModal = imageModal.querySelector('#closeImageModal')
  const imageElement = document.createElement("img")
  imageModal.prepend(imageElement)

  images.forEach((img) => {
    img.addEventListener("click", (e) => {
      imageElement.setAttribute("src", e.target.src)
      imageElement.setAttribute("alt", e.target.alt)
      imageModal.showModal();
    })
  })

  closeImageModal.addEventListener('click', () => {
    imageModal.close()
  })

  imageModal.addEventListener("click", (event) => {
    if (event.target === imageModal) {
      imageModal.close();
    }
  })
</script>