0

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>
'''

1 Answer 1

0

There are a couple of issues with what you are trying to do. See this for reference: Wordpress support for Custom HTML blocks

First, you cannot reliably add JS code directly into any block, which is intended only for HTML and text. While the script tags may technically be HTML, your JS code certainly is not HTML or text. In the supplied link you see the list of supported tags and script isn't one of them.

My suggestion would be to create a shortcode for this.

Second, for security reasons an iframe is only allowed on plug-in enabled sites. According to this, your site would need to be Business, Commerce or Enterprise. Plugin Enabled Sites

Sorry, there isn't a quick fix.

2
  • Hi! Thanks for the comment. I think I will put it into shortcode. I just have a question on what the shortcode should include, I plan on using this code multiple times but with different links for the html part to display. Am I able to create a short code that just has the javascript and when I do the custom html code it will automatically refer to that shortcode to run it? Feb 23, 2023 at 20:46
  • It isn't recommended but I have put script directly into a shortcode. What is recommended is to use wep_enqueue_scripts and wp_enqueue_styles. This will make you short code much cleaner. You might check this as a starting point: wordpress.stackexchange.com/questions/72590/…. If you could mark this as answered I'd greatly appreciate it.
    – xsoftie
    Feb 23, 2023 at 21:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.