Aller au contenu

Recommandez Gemeos à votre réseau et touchez une commission

Découvrir notre système d’apport d’affaires
On en discute ?

CRO / Conversion2 min lecture

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

Fermez avec le bouton, un clic à l'extérieur, ou la touche Échap

Classe CSSÉlémentRôle
modal-overlayDiv de la popupÉlément à masquer à la pression Échap
is-visibleClasse activeClasse 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 = '';
  }
});

Conclusion

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

Publié le 19 mai 2026

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Ces tutoriels pourraient vous intéresser

Tutoriels similaires

Voir tout

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

Let’s f*****G GO !!