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é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 = '';
}
});Conclusion
Une ligne de code qui améliore significativement l'accessibilité clavier. Voir aussi : créer un modal natif dans Webflow.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
