image-modal.html

<div id="myModal" class="modal">
  <button class="modal-close" onclick="closeModal()">close</button>
  <div class="modal-cont">
    <img class="modal-pic" id="modalPic" onclick="closeModal()" style="max-width: 100%; max-height: 80vh; margin: auto;" alt="Modal-pic">
  </div>
</div>

<script>
// Open the Modal
function openModal(imageIdOrElement) {
  var src;

  if (typeof imageIdOrElement === 'string') {
    // If it's a string (image ID), get the source using the ID
    src = document.getElementById(imageIdOrElement).src;
  } else if (imageIdOrElement instanceof HTMLImageElement) {
    // If <img>, get the source directly
    src = imageIdOrElement.src;
  }

  if (src && src.includes("#")) {
    src = src.substring(0, src.indexOf("#"));
  }

  document.getElementById("modalPic").src = src;
  document.getElementById("myModal").style.display = "block";
  document.getElementById("site-footer").style.display = "hidden";
}


// Close the Modal
function closeModal() { 
  document.getElementById("modalPic").src = "";
  document.getElementById("myModal").style.display = "none";
  document.getElementById("site-footer").style.display = "block";
}

</script>

<!-- To attach onclick attribute to all <img> -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    var imgTags = document.querySelectorAll("img");
    imgTags.forEach(function (img) {
      img.onclick = function () {
        if(img.id !== "navbar-brand_logo") {
          openModal(img);
        }
      };
    });
  });
  </script>