Add a variable from a Post ID within a loop to a Modal Query getElementByID

0
votes

I have a page which has 2 (but the potential of many many more) buttons which open up modal windows, each modal has a form and some text on it which is individual to that button.

All of these items are called from a Custom Post Type from within WordPress.

The issue I'm having is that I'm currently using a Modal Window JS and CSS:

    var modal = document.getElementById('myModal');
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];
    btn.onclick = function() {
        modal.style.display = "block";
    }
    span.onclick = function() {
        modal.style.display = "none";
    }
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        } 
    }

Then it's using the usual to open have the details for the Modal within the loop for the item on my page.

My issue is, is that the id is individual, so it only works once. I need to find a way to allow for a post_ID from the loop to be involved in the opening. I have tried adding "> and then changing out the var modal = document.getElementByID('myModal'); to document.querySelector("[id^='myModal-']"); but this didn't work.

The code is currently being used here: https://www.ubersmith.com/webinars-and-events/

You will see that the first "On Demand" link works but the second doesn't.

Can anyone help me work this out? I'm sure that I'm just missing one bit of the puzzle.

Any help would be great!

Thanks in advance :)

2
javascriptjqueryhtmlwordpressbootstrap-modal

2 Answers

0
votes

Your problem is that document.getElementById and document.querySelector will only ever get one element. Instead, change the modal and button ids to a class-name, say modal and modal-trigger. Then, find all of the article elements, and add the event listeners in a loop. For example,

var articles = document.querySelectorAll("article");
for (var i = 0; i < articles.length; i++) {
    var article = articles[i];
    var modal = article.querySelector(".modal");
    var button = article.querySelector(".modal-trigger");
    var closeButton = article.querySelector(".close");

    // if there is no modal, ignore this article
    if (!modal) continue;

    button.onclick = function() {
        modal.style.display = "block";
    }
    closeButton.onclick = function() {
        modal.style.display = "none";
    }

    // add event listener instead so it can be added multiple times
    window.addEventListener("click", function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        } 
    });
}
0
votes

Thanks Jay :) I took what you did and found the solution:

    var modalBtns = [...document.querySelectorAll(".register")];
    modalBtns.forEach(function(btn){
      btn.onclick = function() {
        var modal = btn.getAttribute('data-modal');
        document.getElementById(modal).style.display = "block";
      }
    });
    var closeBtns = [...document.querySelectorAll(".close")];
    closeBtns.forEach(function(btn){
      btn.onclick = function() {
        var modal = btn.closest('.modal');
        modal.style.display = "none";
      }
    });
    window.onclick = function(event) {
      if (event.target.className === "modal") {
        event.target.style.display = "none";
      }
    }

This did the job :)

Thanks for your help :)