modalView.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Styling for the modal */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      justify-content: center;
      align-items: center;
      display: -webkit-flex; /* For older WebKit browsers */
    }

    /* Styling for the modal content */
    .modal-content {
      max-width: 80%;
      max-height: 80%;
    }

    /* Styling for the close button */
    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #fff;
      cursor: pointer;
    }

    /* Styling for the button image */
    .button-image {
      width: auto;
      max-height: 80%;
      cursor: pointer;
    }

    /* Styling for the image in the modal */
    .modal-content img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>

<!-- Image as a button to open the modal -->
<img class="button-image" src="https://raw.githubusercontent.com/error420notfound/webHTML/a987057f93a6f728bbdfb87d5bd5e880f46b1cf0/AR_CTA_Button_2_a.svg" alt="Open Modal" onclick="openModal()">

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <!-- Close button -->
    <span class="close" onclick="closeModal()">&times;</span>
    <!-- Image in the modal -->
    <img src="data:image/gif;base64,R0lGODlhhACEAJEAAAAAAP///wAAAAAAACH5BAEAAAIALAAAAACEAIQAAAL/jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8chQNf2jeeMTfFPDtgBh8Qe8YgT0ozLn26BjNaY0qMyOPE5gNfqkOrlQqdZ8vapCFvLTYs28EYgIfNxuxJ33qlyc6J+VmSH5eZHZ8hGCIdoANjg2LeXyHfxlte4Fvg1iHH56OfoeXUoWXgXyvh5mrlYqqo4umHJKsp5gOoaq8kxK4iZa/u7KUy5KwtKm6rbOszclerZ2ywtRjx5m+xa/QeN7OuM/V2b5j3dnRTMvSpevj2urogLG36zHBmfjc8OTL5u7r8s2rl51oS5U5ZO3r2AA+3Ru3eQHzyIaMAVnPgw3cKE//mKMYuoj6DFkRv7iaRW8V1JPA0TbaMIsBJCk51aSoBET1pNiSs99tTTDGbInSId3rQZAafBckTBqKmX8aLOqCNRPp0J7+pUqUypbv2olWfOsEO9duUac2lYp2vNpq16Fi5ZrCy8MER3UYYJuxzxktRLgi/NsW8BB65yF2reF1+/kio6yCrkxZSTxnUMlG3IdwLFDkZb9qhnsP44I/XYmC7Vx5IfG82A+TNG0EpJnzwts7BGt5tZCX2tMvPq3aCFviR8W5tqY5V/Fkd+XG3y6aixgnRu2/Ro48vlTra9snNQ4pa/uR5uMrVy8+RZVzzfHHn4gdFns2TP/G/l2iDFi/9/DZ9+AvKX0nvykRecbP9FZqB0vzG4HnW5hWYfdxG2BqGEsvkEVH3qKeYdgaV1l2B2SGFIm2+8lciiis85uKKLIZJII37ePZiijSiWp+GA3eHo44i6xbchbwB2GNd8fi0oWo9M3gfik9e1h2CS6PEY24xDCghCfRaCGOAzb3n5AZnSmVlhhkqCOQKagvHo3pgNzjDnly1KNCWMTXqIG5FasrmflXvO+SR2a/IZoaFI+oVdoX2NF+iWcQIaZI+JIerkj4tGAeSdURa4ZDuapofYgX52CuqnQn43qTxZitnbqoeOmlWpenKppqngxbidkSdIlmelrwp36jGrBuufoHD/XtmlqPtQiGqvL5YAbKqNWnvNoMde9tSseNZJJanbyqmGt9+hqai4saq6rkK6wsqhJtWSG4a5kxIl4rrwvsvso7zYah+mO6YbMK12nkhoqo7mVyKsmAIZLaWeEgycs+wKTB9ZhyUKncXJXqhxmwg/izHIbYkgZT4lTzeXYdnieuu+DMtYl7IQ5zqzjTVLyq+6Ada2M7Q4v6JduzXOda7FP2N7K7odl0vsrjmzG7GnLUftptK86utSyFMXHXHVRzeV4cOb3htumk06nPC3jA5Ncb/5HcyxvNa1zarcr7D9tp9Z9w1zwc+uSXDRbzY7LoUfhlk2zcYaTS/hUfMNaQfzsSrOrdtJQ42yx8pe9aXkChq8dZagP4153YEvPXjjJDNdadxfw073xbCnLK3g/6ROadiPmr026qJLTfTnnqvO+u72nn3l5UeO3nqOm1P9O97xLht80yr3uXraz+vufM+xT0h29sS7yn3Den+//JlaF1msuqe7H6qOmXMqPuVv7i/jh+iPhrTj2Q5w/tseAAMIuQFK7H7/y5vLHgjBCEpwghSsoAUviMEManCDHOygBzlYAAA7" alt="Modal Image">
  </div>
</div>

<!-- JavaScript to control the modal -->
<script>
  function openModal() {
    document.getElementById("myModal").style.display = "flex";
  }

  function closeModal() {
    document.getElementById("myModal").style.display = "none";
  }
</script>

</body>
</html>