JavaScript - Displaying Popups

Question

I am trying to display different popups based on randomly generated ids. The code I am using is as follows (this is done using Toolset Types in WordPress):

    <div class="id-select" id="[random_number]">
    <div class="service-container">
        <div class="service-image">
            [types field="picture"][/types]
        </div>
        <div class="service-text">
            <p><strong>Item:</strong> [wpv-post-title output="sanitize"]</p>
            <p><strong>Suitable For:</strong> [wpv-post-taxonomy type="memorial-category" format="name"]</p>
            <p><strong>Price:</strong> [types field="price"][/types]</p>
        </div>
    </div>
</div>
<!-- The Modal -->
<div id="myModal-custom" class="modal-custom">

    <!-- Modal content -->
    <div class="modal-content-custom">
        <span class="close-custom">×</span>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                  <div class="service-image">
                    [types field="picture"][/types]
                  </div>
                </div>
                <div class="col-md-6">
                    <div class="service-text">
                        <p><strong>Item:</strong> [wpv-post-title output="sanitize"]</p>
                        <p><strong>Suitable For:</strong> [wpv-post-taxonomy type="memorial-category" format="name"]</p>
                        <p><strong>Price:</strong> [types field="price"][/types]</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

The JavaScript is as follows:

// Get the modal
var modal = document.getElementById('myModal-custom');
// Get the button that opens the modal
      var ids = [];
      $('.id-select').each(function(i, el) {
        if (el.id == '') {
          return;
        }
        ids.push('#' + el.id);
      });
      //console.log(ids.join(','));

      $(ids.join(',')).on('click', function(e) {
        modal.style.display = "block";
      })
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-custom")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

The problem im having is that any item i click on the front-end displays the same modal box. Is there anyway I can get it to pick up the correct modal box for a specific item?

The live site - http://79.170.40.172/tc-pinkfin.co.uk/memorials/cemetery/

Answer 1

How would you expect modal to be different, when you dont parametrize it in getter anyhow?

var modal = document.getElementById('myModal-custom');

You always ask for same modal, so it s always the same.

Do you have more modals on your page?

Do you somehow pass different data to that one modal and it s not displaying?

On your page I see you display boxes with images and some additional data. Guess you have those images + data in some array like:

const items = [
   { imgSrc: "...", additionalData:{...} },
   { imgSrc: "...", additionalData:{...} },
   { imgSrc: "...", additionalData:{...} },
];

Generally what you need do to is to associate modal with each item (from above array)

Best moment to do that would be at the time when you create those boxes you already have on your page and want to click to show modal (you do that in a loop, right?).

Possible solutions:

• when creating each box, you can attach click handler to it, pointing to particular modal instance.
• extend each item object with unique ID and somehow add that ID to proper modal DOM element for each item. Ex. data-modaluid="$uniqueIDFromItem" Than on click on each item, bind click method with that ID (which can also be set as data-itemuid=$uniqueIDFromItem or just binded in click handler) and by that ID search for proper modal DOM node.

There are few ways to do that depending on how you structurized your page and how you handle your data.

HTML

<button>toggle modal 1</button>
<button>toggle modal 2</button>
<button>toggle modal 3</button>

<div class="modal">
  modal 1
</div>
<div class="modal">
  modal 2
</div>
<div class="modal">
  modal 3
</div>

Javascript

General idea is to connect each clickable item with model by unique id (uid).

function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

document.addEventListener("DOMContentLoaded", () => {
  const modals = document.querySelectorAll(".modal")
  const buttons = document.querySelectorAll("button")

  let guids = []

  //create unique IDs for modals/buttons
  buttons.forEach(button => {
    guids.push(guid())
  })

  //set those IDs for buttons/modals with same order in array. Creating connections  1->1 2->2 3->3
  guids.forEach((guid, index) => {
    buttons[index].dataset.guid = guid
    modals[index].dataset.guid = guid
  })

  //add onClick event listener for each button
  buttons.forEach(button => {
    button.addEventListener("click", (e) => {
       //find proper div modal with same ID as clicked button
       const divModal = document.querySelector(`div[data-guid="${e.target.dataset.guid}"]`)
       //change its style when not visible assign "visible", otherwise assign "hidden"
       divModal.style.visibility = divModal.style.visibility !== "visible" ? "visible" : "hidden";
    })
  })
})

Codepen:

https://codepen.io/anon/pen/GXzOJv?editors=1011

Credits

GUID method from here: Create GUID / UUID in JavaScript?