What is the method for showing distinct modals associated with individual divs having unique identifiers in Javascript?

edit

To show distinct modals associated with individual divs having unique identifiers in Javascript, you can use the following steps:

1. Create a modal container in HTML with a unique identifier for each modal.
2. Create a trigger element for each modal with a unique identifier in HTML.
3. In Javascript, select all trigger elements using document.querySelector() method and then loop through them to add event listeners for clicking.
4. Add an event listener for each trigger element to show the corresponding modal by using the unique identifier to select the modal container using document.querySelector() method.
5. Within the event listener, you can use the style property to change the display value of the modal container to "block" to show the modal, or "none" to hide it.

Here’s an example implementation of this method:

HTML code:

<div id="modal-1" class="modal">
   <div class="modal-content">
      <span class="close">&times;</span>
      <p>Modal 1 Content goes here.</p>
   </div>
</div>

<div id="modal-2" class="modal">
   <div class="modal-content">
      <span class="close">&times;</span>
      <p>Modal 2 Content goes here.</p>
   </div>
</div>

<button id="trigger-1">Open Modal 1</button>
<button id="trigger-2">Open Modal 2</button>

Javascript code:

// Select all trigger elements
const triggers = document.querySelectorAll("button[id^='trigger-']");

// Loop through all triggers to add event listeners
triggers.forEach((trigger) => {
   trigger.addEventListener("click", (e) => {
      // Get unique identifier from trigger element's id attribute
      const modalId = e.target.id.replace("trigger-", "modal-");
      // Select corresponding modal container using unique identifier
      const modal = document.querySelector(`#${modalId}`);
      // Show modal by changing display value
      modal.style.display = "block";
   });
});

// Add event listeners to close buttons of all modals
const closeButtons = document.querySelectorAll(".modal .close");

closeButtons.forEach((button) => {
   button.addEventListener("click", (e) => {
      // Get parent container of close button (modal) and hide it
      const modal = e.target.parentNode.parentNode;
      modal.style.display = "none";
   });
});