Styles des fenêtres modales et boîtes de dialogue

L’élément HTML <dialog> fournit un comportement de fenêtre modale intégré : piégeage du focus, fermeture avec Échap et API showModal() / close(). Mettez-le en forme avec CSS au lieu de créer toute l’infrastructure d’une fenêtre modale personnalisée.

Le pseudo-élément ::backdrop met en forme la superposition derrière une balise <dialog> ouverte. Appliquez un arrière-plan semi-transparent : dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. Aucun div conteneur n’est nécessaire.

Centrez les boîtes de dialogue avec CSS : dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. L’utilisation de marges automatiques sur une boîte de dialogue la positionne au centre de la fenêtre d’affichage sans nécessiter de positionnement avec JS.

Définissez overflow-y: auto sur la boîte de dialogue elle-même pour gérer les contenus longs. Définissez overflow: hidden sur body lorsque la fenêtre modale s’ouvre afin d’empêcher le défilement de l’arrière-plan — ajoutez et retirez une classe avec JavaScript pour activer ou désactiver ce comportement.

Animez l’ouverture de la boîte de dialogue avec @starting-style (Chrome 117+) pour créer des animations d’entrée uniquement en CSS, sans JavaScript. Pour une compatibilité plus large, ajoutez une classe d’ouverture avec JavaScript et utilisez une transition sur la transformation et l’opacité : faites-la glisser vers le haut, de translateY(20px) à translateY(0).

Animer la fermeture d’une boîte de dialogue est délicat : la boîte de dialogue est masquée immédiatement lors de l’appel à close(). Solutions : utilisez l’API des fenêtres contextuelles, qui prend nativement en charge les animations de fermeture, ou interceptez la fermeture avec JavaScript, appliquez la classe d’animation de sortie, puis appelez close() lorsque l’animation se termine.

Les boîtes de dialogue s’ouvrent au-dessus de tout le reste du contenu de la page. Évitez les conflits de z-index en utilisant le contexte d’empilement natif de l’élément de boîte de dialogue : il est rendu dans la couche supérieure, au-dessus de toutes les valeurs de z-index CSS, sans nécessiter de définir un z-index sur la boîte de dialogue elle-même.

Sur mobile, faites glisser les boîtes de dialogue depuis le bas comme une feuille : dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. Sur ordinateur, centrez-les comme une fenêtre modale traditionnelle en utilisant le modèle avec des marges automatiques.

L’élément de boîte de dialogue natif déplace automatiquement le focus vers le premier élément focalisable à l’ouverture. Assurez un ordre de tabulation logique dans la boîte de dialogue. Ajoutez un bouton de fermeture qui rend le focus à l’élément déclencheur lors de la fermeture de la boîte de dialogue, afin de garantir une navigation fluide au clavier.

Ajoutez aria-labelledby en le faisant pointer vers le titre de la boîte de dialogue, et aria-describedby en le faisant pointer vers sa description. Le rôle de boîte de dialogue est implicite pour <dialog>. Les lecteurs d’écran annoncent ces libellés lorsque le focus entre dans la boîte de dialogue.

Les boîtes de dialogue de confirmation nécessitent : un titre formulé comme une question claire, une brève description des conséquences, un bouton d’action destructive (rouge, aligné à droite) et un bouton d’annulation (aligné à gauche ou secondaire). Utilisez autofocus sur le bouton d’annulation afin que le choix sûr soit l’interaction clavier par défaut.

Quel est l’avantage d’utiliser l’élément <dialog> natif plutôt qu’une fenêtre modale personnalisée basée sur un div ?

L’élément de boîte de dialogue natif, associé à ::backdrop, au centrage avec des marges automatiques, au contrôle du débordement, aux animations CSS d’entrée et à la gestion du focus, fournit un modèle de fenêtre modale entièrement accessible et piloté par CSS. Des mises en page adaptatives en feuille sur mobile et des attributs ARIA appropriés complètent un composant de boîte de dialogue prêt pour la production.