Générateur de modale (fenêtre pop-up) avec dialog

Générateur de modale (fenêtre pop-up) avec dialog: à quoi ça sert

Les fenêtres modales servent à confirmer une action, afficher un court formulaire ou mettre en avant un appel sans faire quitter la page. Réalisées à la main avec une div, elles échouent souvent au clavier et avec les lecteurs d’écran.

Ce générateur utilise l’élément dialog avec showModal(), pris en charge par tous les navigateurs actuels depuis 2022 : le navigateur place la fenêtre au-dessus, rend le reste de la page inerte, piège le focus, ferme avec Échap et rend le focus au bouton. Le code ajoute le style, le clic à l’extérieur pour fermer et une entrée douce avec @starting-style qui respecte les personnes préférant moins de mouvement.

Mode d’emploi

1. Écrivez le titre, le texte et les boutons.
2. Choisissez la couleur, la largeur et les coins.
3. Testez dans l’aperçu et copiez le code.

Quand l’utiliser

• Appel à prendre rendez-vous via WhatsApp.
• Confirmation avant une action.
• Annonce de nouveauté ou court formulaire.

Questions fréquentes

Pourquoi utiliser l’élément dialog ?

Avec showModal(), le navigateur place la fenêtre au-dessus de tout, rend le reste de la page inerte, piège le focus à l’intérieur, ferme avec Échap et rend le focus au bouton qui l’a ouverte. Auparavant, cela demandait beaucoup de JavaScript et laissait presque toujours des failles d’accessibilité.

Cela fonctionne-t-il sur tous les navigateurs ?

Oui, le dialog est pris en charge par Chrome, Edge, Firefox et Safari depuis 2022.

Puis-je ouvrir la modale automatiquement à l’arrivée sur le site ?

C’est possible, mais un pop-up qui s’ouvre sans que la personne l’ait demandé agace en général et, sur mobile, Google peut déclasser les pages avec des publicités intrusives qui masquent le contenu. Préférez l’ouvrir à partir d’un bouton.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires