How to control multiple modal boxes on one webpage?

Question

I'm currently rebuilding my portfolio and have cards for each of the projects that I've worked on, the idea being that when the user clicks on a card it opens a modal box containing more information about the project and a link to it.

Unfortunately, I can't figure out how to have multiple modal boxes on the same page, without writing a new block of code for every single box. I'm guessing I'll need some sort of for loop but I've been experimenting all day and can't find anything that works.

This is the JavaScript I have so far:

 var modal = document.getElementsByClassName("modal")[1]; var card = document.getElementsByClassName("card")[1]; // When the user clicks on the card, open the modal box card.onclick = function() { modal.style.display = "block"; } // When the user clicks anywhere outside of the modal box, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }

Many thanks!

Answer 1

Add a class in your modal something like .modal ;

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