Nie jestem najlepszy w kodowaniu, ale udało mi się stworzyć ten kod html modalnego wyskakującego okienka, który zawiera CSS, Javascript i html … działa w przeglądarce html lub gdziekolwiek indziej oprócz niestandardowego html wordpress blok. Mam inną wersję, mniej skomplikowaną i będzie działać na wordpressie (tj. pop-up działa i przyciski naciskają), ale ta wersja nie pozwoli mi kliknąć obrazka, aby otworzyć pop-up. Nie mogę zrozumieć, czy coś w kodzie temu zapobiega, czy co. Sprawdziłem, czy modal jest poprawnie wykonywany w kodzie, wszystkie obrazy mają poprawne id, style CSS są w porządku. Sprawdziłem również w wordpressie i nie mogę znaleźć niczego, co uniemożliwiałoby otwarcie tego modalu, gdy inni mogliby równie łatwo. Myślę, że może to być związane z javascriptem? Proszę pomóż

<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="
  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=" />
    </div>
    <div>
      <div class="preview-container">
        <div class="preview-box" id="1">
          <div class="preview-title">
            Preview:
            <a href="
              1</a>
          </div>
          <iframe
            src="
            width="600px" height="300px">
          </iframe>
        </div>
        <div class="preview-box disabled" id="2">
          <div class="sub-box">
            <div class="preview-title">
              Preview:
              <a
                href="
                2.1
              </a>
            </div>
            <iframe
              src="
              width="600px" height="300px">
            </iframe>
          </div>
          <div class="sub-box disabled">
            <div class="preview-title">
              Preview:
              <a
                href="
                2.2
              </a>
            </div>
            <iframe
              src="
              width="600px" height="300px">
            </iframe>
          </div>
          <div class="sub-box disabled">
            <div class="preview-title">
              Preview:
              <a
                href="
                2.3
              </a>
            </div>
            <iframe
              src="
              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="
              3</a>
          </div>
          <iframe
            src="
            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>
'''