Vanilla JavaScript : modal

Publié le 10 décembre 2024

JavaScript

// Sélectionner les éléments
const modal = document.querySelector('.modal');
const contacts = document.querySelectorAll('.contact');

// Afficher la modal au clic sur chaque contact
contacts.forEach(function(contact) {
  contact.addEventListener('click', function() {
    modal.style.display = 'flex';
  });
});

// Fermer la modal si l'utilisateur clique en dehors du contenu
modal.addEventListener('click', function(event) {
  if (event.target === this) {
    modal.style.display = 'none';
  }
});

Explication :

Sélection des éléments : Utilisation de document.querySelector pour sélectionner le premier élément avec la classe .modal et document.querySelectorAll pour sélectionner tous les éléments avec la classe .contact.
Événements : Utilisation de addEventListener pour ajouter des gestionnaires d’événements.
Style : Modification du style display directement sur l’élément modal.

Ce code reproduit le même comportement que votre code jQuery, mais en utilisant uniquement JavaScript pur.