.svg)
Maîtriser la Fermeture des Modals avec la Touche Échap dans Webflow
Découvrez comment ajouter une fonctionnalité intuitive à vos modals dans Webflow : la fermeture via la touche Échap. Guide pratique, drôle et plein d'astuces.
Comment ça marche ?
Explications
Quelques bonnes pratiques
Aujourd'hui, je te guide pour offrir à tes utilisateurs un moyen de quitter rapidement des modals: la touche Échap. Être pris au piège dans un modal, après tout, peut être aussi laborieux que de s'échapper d'une conversation interminable sur la météo.
Pourquoi permettre la fermeture avec Échap ?
Imagine : tu explores tranquillement un site et soudain, un modal surgit. C'est intéressant, certes, mais tu préfères souvent poursuivre ta navigation sans devoir interagir avec un bouton spécifique. La touche Échap agit comme un raccourci pratique qui rend le contrôle de la navigation, respectant ainsi le confort de l'utilisateur – un aspect essentiel d'une bonne expérience utilisateur.
Explication du Script
Le fonctionnement est simple : le modal inclut typiquement un bouton de fermeture, souvent marqué par une croix. Normalement, cliquer sur ce bouton déclenche une animation de fermeture. Avec ce code, appuyer sur la touche "Échap" du clavier active le même mécanisme, préservant l'animation originale de fermeture. Et voilà le travail !
Quelques bonnes pratiques :
Si ton site comporte plusieurs modaux utilisant le même type de fermeture, envisage d'attribuer une classe commune aux boutons de fermeture, par exemple fermeture_modal, et modifie le script pour utiliser document.querySelector('.fermeture_modal').click(). Cela permettra de fermer tous les modaux avec un seul morceau de code. Pour les projets plus importants, il est conseillé d'utiliser les "Custom attributes" pour marquer les boutons de fermeture des modaux.
Comment intégrer mon code dans webflow ?
Ces prochaines étapes t'aideront à mettre en place efficacement le code ci dessus, améliorant ainsi l'expérience utilisateur sur ton site Webflow en permettant une navigation plus intuitive et réactive.
Accède à la page Webflow
Commence par ouvrir ton projet Webflow. Navigue jusqu'à la page où tu souhaites intégrer le code de la fonctionnalité que tu souhaites intégrer.
Insère le script dans la page
Une fois sur la page appropriée, trouve l'onglet 'Page Settings' qui se situe généralement dans le panneau supérieur ou latéral de l'interface de Webflow.
Ouvre cet onglet et cherche la section intitulée Before </body> tag et colle ton code dans cette section. Si c'est du style, colle ton code dans la section Inside <head> tag
Vérifie le fonctionnement du code
Avant de conclure l'intégration, il est essentiel de s'assurer que le script fonctionne correctement, tant sur ton environnement de test que sur ton site en production.
Publie le script, ensuite la page, et ouvre une nouvelle fenêtre de ton navigateur pour visiter ton site.
Le script opère-t-il correctement ? Si c'est le cas, parfait !
Dans le cas contraire, n'hésite pas à nous contacter pour obtenir de l'aide.
Prêt.e à propulser ton entreprise ?
Nous aussi !
Contacte-nous dès maintenant. (Ou quand tu veux, no stress.) On a hâte de t’aider à réaliser tes rêves les plus fous.