MediaWiki:Script/Modal.js : Différence entre versions

(Page créée avec « function createModalInteraction(content){ var boutonModal = content.querySelector(".button"); var modalContent = content.querySelector(".modal"); var boutonClose... »)
 
 
Ligne 5 : Ligne 5 :
 
   var boutonClose = content.querySelector(".close");
 
   var boutonClose = content.querySelector(".close");
 
    
 
    
   boutonModal.addEventListener("click", function(){
+
   boutonModal.addEventListener("click", function() {
     boutonModal.className += " tabber-active";
+
     boutonModal.classList.add("tabber-active");
     modalContent.style.display = "block";
+
     modalContent.classList.add("gen-active");
 
      
 
      
     boutonClose.addEventListener("click", function(){
+
     boutonClose.addEventListener("click", function() {
       modalContent.style.display = "none";
+
       boutonModal.classList.remove("tabber-active");
       boutonModal.className = boutonModal.className.remove("tabber-active");
+
       modalContent.classList.remove("gen-active");
 
     });
 
     });
 
      
 
      
     window.addEventListener("click", function(e){
+
     window.addEventListener("click", function(e) {
 
       if (e.target == modalContent) {
 
       if (e.target == modalContent) {
         modalContent.style.display = "none";
+
         boutonModal.classList.remove("tabber-active");
         boutonModal.className = boutonModal.className.remove("tabber-active");
+
         modalContent.classList.remove("gen-active");
 
       }
 
       }
 
     });
 
     });

Version actuelle datée du 13 mai 2022 à 08:30

function createModalInteraction(content){
  
  var boutonModal = content.querySelector(".button");
  var modalContent = content.querySelector(".modal");
  var boutonClose = content.querySelector(".close");
  
  boutonModal.addEventListener("click", function() {
    boutonModal.classList.add("tabber-active");
    modalContent.classList.add("gen-active");
    
    boutonClose.addEventListener("click", function() {
      boutonModal.classList.remove("tabber-active");
      modalContent.classList.remove("gen-active");
    });
    
    window.addEventListener("click", function(e) {
      if (e.target == modalContent) {
        boutonModal.classList.remove("tabber-active");
        modalContent.classList.remove("gen-active");
      }
    });
  });
}

(function(){
  var modalContainers = document.querySelectorAll("div#mw-content-text div.modalContainer");
  modalContainers.forEach(function(modalContainer){
    createModalInteraction(modalContainer);
  });
})();