Ce code HTML ne marche pas, pourquoi ?

Bonjour,

Que contient ton fichier app.js  ?

N'aurais tu pas des erreurs qui s'affichent dans la console de ton navigateur ?

PS: Pour poster du code sur le forum, merci d'utiliser l'icone prévue à cet effet lorsque tu rédiges ton message...

Merci de ta réponse :

const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelectorAll(".modal-trigger");

modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))

function toggleModal(){
  modalContainer.classList.toggle("active")
}

Ton JS n'est pas bon.

Tu ne lui dit pas quelle modale afficher..

Essaye comme ceci:

 <div class="modal-container">

      <div class="overlay modal-trigger"></div>
          
      <div id="modal1" class="modal" role="dialog" aria-labelledby="modalTitle1" aria-describedby="dialogDesc1">
        <button
        aria-label="close modal"
        class="close-modal ">X</button>
        <h1 id="modalTitle1">Contenu 1</h1>
        <p id="dialogDesc1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nam exercitationem nihil veritatis sapiente quia.</p>
      </div>

      <div id="modal2" class="modal" role="dialog" aria-labelledby="modalTitle2" aria-describedby="dialogDesc2">
        <button
        aria-label="close modal"
        class="close-modal ">X</button>
        <h1 id="modalTitle2">Contenu 2</h1>
        <p id="dialogDesc2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nam exercitationem nihil veritatis sapiente quia.</p>
      </div>

      <div id="modal3" class="modal" role="dialog" aria-labelledby="modalTitle3" aria-describedby="dialogDesc3">
        <button
        aria-label="close modal"
        class="close-modal ">X</button>
        <h1 id="modalTitle3">Contenu 3</h1>
        <p id="dialogDesc3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nam exercitationem nihil veritatis sapiente quia.</p>
      </div>

    </div>

    <button id="modalBtn1" class="modal-btn modal-trigger" data-target="modal1">Open Modal 1</button>
    <button id="modalBtn2" class="modal-btn modal-trigger" data-target="modal2">Open Modal 2</button>
    <button id="modalBtn3" class="modal-btn modal-trigger" data-target="modal3">Open Modal 3</button>

 const modalTriggers = document.querySelectorAll(".modal-trigger");
    const closeMdls = document.querySelectorAll(".close-modal");
    
   
    modalTriggers.forEach(function(el){
      el.addEventListener("click", function(){
           console.log("bouton cliqué",this); 
           let target = this.dataset.target;
           console.log("modal target",target);
           let modalContainer = document.querySelector("#"+target);
           removeActive(); // on enleve la class active sur toutes les modales
           modalContainer.classList.add("active")
        });
      });
    
    closeMdls.forEach(function(btnclose){
      btnclose.addEventListener("click",function(){
        removeActive();
      });
    });
    
      function removeActive(){
      var modals = document.querySelectorAll(".modal");
        modals.forEach(function(div){
           div.classList.remove("active");
        });
      }