Comment fermer une popup avec la touche Échap dans Webflow ?

Apprenez à fermer une popup ou modal dans Webflow avec la touche Échap grâce à un listener keydown JavaScript.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment fermer une popup ou modal dans Webflow avec la touche Échap.

Exemple

Classe CSS	Élément	Rôle
modal-overlay	Div de la popup	Élément à masquer à la pression Échap
is-visible	Classe active	Classe ajoutée quand la popup est ouverte

Le script

Ajoutez ce script dans le Before </body> tag de votre page. Remplacez .modal-overlay par la classe de votre popup.

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    var modal = document.querySelector('.modal-overlay');
    if (modal) {
      modal.style.display = 'none';
      document.body.style.overflow = '';
    }
  }
});

Adapter à plusieurs popups

Pour fermer toutes les popups ouvertes en même temps avec Échap :

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    document.querySelectorAll('.modal-overlay').forEach(function(m) {
      m.style.display = 'none';
    });
    document.body.style.overflow = '';
  }
});

bon à savoir

Ce script complète la gestion de fermeture au clic en dehors de la popup. Combinez les deux pour une expérience complète : fermeture au clic overlay + fermeture à la touche Échap. C'est la norme d'accessibilité WCAG 2.1 pour les dialogs : ils doivent pouvoir être fermés avec le clavier.

Conclusion

Une ligne de code qui améliore significativement l'accessibilité clavier. Voir aussi : créer un modal natif dans Webflow.

Comment fermer une popup avec la touche Échap dans Webflow ?

Exemple

Le script

Adapter à plusieurs popups

Ce script complète la gestion de fermeture au clic en dehors de la popup. Combinez les deux pour une expérience complète : fermeture au clic overlay + fermeture à la touche Échap. C'est la norme d'accessibilité WCAG 2.1 pour les dialogs : ils doivent pouvoir être fermés avec le clavier.

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

tutoriels similaires