I’m not the best at coding, but I’ve managed to create this html code of a modal pop-up which includes CSS, Javascript, and html… it works in an html viewer or anywhere else except the wordpress custom html block. I have another version less complicated and it will work on wordpress (i.e the pop-up works and buttons press), but this version will not let me click the image to open the pop-up. I can’t figure out if something in the code is preventing it or what. I’ve checked that the modal is executed properly within the code, all images have the correct id, CSS styles are okay. I’ve also checked within wordpress and cant find anything preventing this modal to not open when others could just as easily. I think it might be javascript related? Please help

<style>
  /* The Modal (background) */
  .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 2147483647;
    /* Sit on top of everything */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
  }

  /* Modal Content */
  .modal-content {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
    padding: 20px;
    text-align: center;
  }

  /* Image */
  .modal-image {
    width: 500px;
    height: 500px;
  }

  /* How To Box */
  .how-to {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 20px;
    background-color: #eee;
    cursor: pointer;
    margin: 30;
  }

  /* Preview */
  .preview,
  .iframe-class {
    display: none;
    position: center;
  }

  a:hover .iframe-class {
    display: block;
    position: center;
  }

  /* The Close Button */
  .close {
    position: absolute;
    bottom: 20px;
    margin-left: 50%;
    font-weight: bold;
    transition: 0.3s;
    width: 200px;
    background-color: black;
    color: white;
    height: 50px;
    font-size: 20px;
  }

  .option-box {
    text-decoration: underline;
  }

  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }

  .preview-container {
    background-color: white;
    width: 800px;
    height: 500px;
  }

  .preview-title {
    text-align: center;
  }

  .options-container {
    float: right;
    width: 50%;
    position: absolute;
    bottom: 130px;
    margin-left: 36%;
  }

  .options-container button {
    padding: 20px;
    margin-right: 5%;
    margin-left: 5%;
    width: 175px;
  }

  .option.selected {
    background-color: gray;
    color: white;
  }

  iframe {
    display: block;
    width: 99%;
    height: 85%;
  }

  .disabled {
    display: none;
  }

  .arrows-container {
    text-align: center;
    margin-top: 15px;
  }

  @media screen and (max-width: 800px) {
    .modal-content {
      display: block;
    }

    iframe {
      width: 98%;
    }

    .preview-container {
      width: 100%;
    }

    .modal-image {
      width: 80%;
      margin-bottom: 10px;
    }

    .close {
      bottom: -25%;
      margin-left: 40%;
    }

    .options-container button {
      padding: 1%;
    }

    .options-container {
      margin-top: 25px;
      display: inline-flex;
      float: none;
      width: unset;
      position: unset;
      bottom: 0;
      margin-left: 0;
    }
  }
</style>

<!-- The Image -->
<img id="myImg" src="https://sites.gatech.edu/flourishingcommunities/files/2023/01/BuildingEnvelope_TipCards3.jpg"
  width="300" height="300" onclick="openModal();" />

<!-- The Modal -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <div>
      <img class="modal-image" id="img01"
        src="https://sites.gatech.edu/flourishingcommunities/files/2023/01/BuildingEnvelope_TipCards3.jpg" />
    </div>
    <div>
      <div class="preview-container">
        <div class="preview-box" id="1">
          <div class="preview-title">
            Preview:
            <a href="https://sites.gatech.edu/flourishingcommunities/files/2023/01/01-TE-How-To-Weatherstrip-Doors.pdf">How-To-Weatherstrip-Doors-PDF
              1</a>
          </div>
          <iframe
            src="https://sites.gatech.edu/flourishingcommunities/files/2023/01/01-TE-How-To-Weatherstrip-Doors.pdf"
            width="600px" height="300px">
          </iframe>
        </div>
        <div class="preview-box disabled" id="2">
          <div class="sub-box">
            <div class="preview-title">
              Preview:
              <a
                href="https://sites.gatech.edu/flourishingcommunities/files/2023/01/01-TE-How-To-Weatherstrip-Doors.pdf">How-To-Weatherstrip-Doors-PDF
                2.1
              </a>
            </div>
            <iframe
              src="https://sites.gatech.edu/flourishingcommunities/files/2023/01/01-TE-How-To-Weatherstrip-Doors.pdf"
              width="600px" height="300px">
            </iframe>
          </div>
          <div class="sub-box disabled">
            <div class="preview-title">
              Preview:
              <a
                href="https://sites.gatech.edu/flourishingcommunities/files/2023/01/01-TE-How-To-Weatherstrip-Doors.pdf">How-To-Weatherstrip-Doors-PDF
                2.2
              </a>
            </div>
            <iframe
              src="https://sites.gatech.edu/flourishingcommunities/files/2023/01/01-TE-How-To-Weatherstrip-Doors.pdf"
              width="600px" height="300px">
            </iframe>
          </div>
          <div class="sub-box disabled">
            <div class="preview-title">
              Preview:
              <a
                href="https://sites.gatech.edu/flourishingcommunities/files/2023/01/01-TE-How-To-Weatherstrip-Doors.pdf">How-To-Weatherstrip-Doors-PDF
                2.3
              </a>
            </div>
            <iframe
              src="https://sites.gatech.edu/flourishingcommunities/files/2023/01/01-TE-How-To-Weatherstrip-Doors.pdf"
              width="600px" height="300px">
            </iframe>
          </div>
          <div class="arrows-container">
            <button onclick="previousSubBox()">&#60;&#60;</button>
            <button onclick="nextSubBox()">>></button>
          </div>
        </div>
        <div class="preview-box disabled" id="3">
          <div class="preview-title">
            Preview:
            <a href="https://sites.gatech.edu/flourishingcommunities/files/2023/01/01-TE-How-To-Weatherstrip-Doors.pdf">How-To-Weatherstrip-Doors-PDF
              3</a>
          </div>
          <iframe
            src="https://sites.gatech.edu/flourishingcommunities/files/2023/01/01-TE-How-To-Weatherstrip-Doors.pdf"
            width="600px" height="300px">
          </iframe>
        </div>
      </div>
    </div>
    <div class="options-container">
      <button class="option selected" onclick="activatePreview(this, 1)">
        Finanacial incentive's
      </button>
      <button class="option" onclick="activatePreview(this, 2)">
        How To's
      </button>
      <button class="option" onclick="activatePreview(this, 3)">
        Option 3
      </button>
    </div>
  </div>
  <button class="close" onclick="closeModal()">Close</button>
</div>

<script>
  /* JAVASCRIPT */
  var modal = document.getElementById("myModal");

  function openModal() {
    var img = document.getElementById("myImg");
    var modalImg = document.getElementById("img01");
    modal.style.display = "block";
    modalImg.src = img.src;
  }

  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
    if (event.target.className === "how-to") {
      var previews = event.target.getElementsByClassName("preview");
      for (var i = 0; i < previews.length; i++) {
        previews[i].style.display = "block";
      }
    }
  };

  function closeModal() {
    hidePreviews();
    modal.style.display = "none";
  }

  function activatePreview(target, id) {
    deactivatePreviews();
    target.classList.add("selected");
    var previewBoxes = document.getElementsByClassName("preview-box");
    for (var i = 0; i < previewBoxes.length; i++) {
      if (previewBoxes[i].id == id)
        previewBoxes[i].classList.remove("disabled");
      else previewBoxes[i].classList.add("disabled");
    }
  }

  function deactivatePreviews() {
    var buttons = document.getElementsByClassName("option");
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].classList.remove("selected");
    }
  }

  function nextSubBox() {
    var subBoxes = document.getElementsByClassName("sub-box");
    for (var i = 0; i < subBoxes.length; i++) {
      if (subBoxes[i].className == "sub-box" && i + 1 < subBoxes.length) {
        subBoxes[i].classList.add("disabled");
        subBoxes[i + 1].classList.remove("disabled");
        return;
      }
    }
  }

  function previousSubBox() {
    var subBoxes = document.getElementsByClassName("sub-box");
    for (var i = 0; i < subBoxes.length; i++) {
      if (subBoxes[i].className == "sub-box" && i - 1 >= 0) {
        subBoxes[i].classList.add("disabled");
        subBoxes[i - 1].classList.remove("disabled");
        return;
      }
    }
  }

  function hidePreviews() {
    var previews = document.getElementsByClassName("preview");
    for (var i = 0; i < previews.length; i++) {
      previews[i].style.display = "none";
    }
  }
</script>
</div>
</div>
'''