Modify JS to allow more than 1 modal on a page

Question

I'm using a modal to display a image-slider for different references of my website. This is how my references look like:

<div>
    <a id="openmodal">
       <p>Project 1</p>
    </a>
</div>

<div>
    <a id="openmodal">
        <p>Project 2</p>
    </a>
</div>

<div>
    <a id="openmodal">
        <p>Project 3</p>
    </a>
</div>

This is the structure of my modal(s)

<div id="modal1" class="modal">
   <div class="modal-content">
      <p>Title</p>
      <div class="slideshow-container">
      <img src="image1.jpg">
      <img src="image2.jpg">
      <img src="image3.jpg">
      <button class="prev" onclick="plusSlider(-1)">&#10094;</button>
      <button class="next" onclick="plusSlider(1)">&#10095;</button>
      </div>
  </div>
</div>


<div id="modal2" class="modal">
   <div class="modal-content">
      <p>Title</p>
      <div class="slideshow-container">
      <img src="image1.jpg">
      <img src="image2.jpg">
      <img src="image3.jpg">
      <button class="prev" onclick="plusSlider(-1)">&#10094;</button>
      <button class="next" onclick="plusSlider(1)">&#10095;</button>
      </div>
  </div>
</div> 


<div id="modal3" class="modal">
   <div class="modal-content">
      <p>Title</p>
      <div class="slideshow-container">
      <img src="image1.jpg">
      <img src="image2.jpg">
      <img src="image3.jpg">
      <button class="prev" onclick="plusSlider(-1)">&#10094;</button>
      <button class="next" onclick="plusSlider(1)">&#10095;</button>
      </div>
  </div>
</div> 

The JS looks like this:

var modal = document.getElementById("modal1");

var btn = document.getElementById("openmodal");

btn.onclick = function() {
  modal.style.display = "block";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
} 

Unfortunately don't know how to modify the JS if i want use more than one modal (with the id="modal2" and id="modal3" ...) on a html page. Or how can i use each modal for each project? Maybe someone can help me?

Thanks so much!

Answer 1

First of all you are using the same id on all the anchor tags which is wrong. You should only have one id per page. You can instead add a common class and add event listeners on them.

Here in the below code we have added class openmodal for all the anchor links and added data-id attribute to differentiate them. On button click we just get this id and open the modal dynamically. This way it will work even if you plan to add more modals to the page.

You can try out something like below.

var btns = document.querySelectorAll(".openmodal");
btns.forEach(btn => {
    const id = btn.getAttribute('data-id');
    btn.onclick = function() {
    document.getElementById(id).style.display = "block";
  }
});

window.onclick = function(event) {
  if (!event.target.closest('.modal') && !event.target.closest('.openmodal')) {
    document.querySelectorAll('.modal').forEach(modal => {
      modal.style.display = "none";
    });
  }
}

.modal {
  display: none;
}

<div>
    <a class="openmodal"  data-id="modal1">
        <p>Project 1</p>
    </a>
</div>

<div>
    <a class="openmodal" data-id="modal2">
        <p>Project 2</p>
    </a>
</div>

<div>
    <a class="openmodal"  data-id="modal3">
        <p>Project 3</p>
    </a>
</div>


<div id="modal1" class="modal">
  Modal 1
</div>

<div id="modal2" class="modal">
  Modal 2
</div> 

<div id="modal3" class="modal">
  Modal 3
</div>