`<dialog>` : l’élément de boîte de dialogue

<dialog> : l’élément de boîte de dialogue

• Intégré nativement : l’élément <dialog> représente des éléments interactifs comme des boîtes de dialogue modales ou non modales, des alertes, des inspecteurs ou des sous-fenêtres. Il est disponible dans la plupart des navigateurs depuis mars 2022.

Attributs

• open : indique que la boîte de dialogue est active et interactive. Si l’attribut open n’est pas défini, elle n’est pas visible pour l’utilisateur. Il est recommandé d’utiliser les méthodes .show() ou .showModal().

Notes d’utilisation

• L’élément HTML <form> peut utiliser l’attribut method="dialog" pour fermer une boîte de dialogue.
• Le pseudo-élément CSS ::backdrop permet de styliser l’arrière-plan d’une boîte de dialogue modale.
• L’attribut autofocus doit être ajouté à l’élément qui doit recevoir immédiatement l’interaction à l’ouverture de la boîte de dialogue.
• Il faut veiller à ne pas ajouter l’attribut tabindex à l’élément <dialog>.

Accessibilité

• Lors de l’implémentation d’une boîte de dialogue, il est important de définir correctement le focus utilisateur.
• Lorsque la boîte de dialogue est ouverte avec la méthode showModal(), le focus est placé sur le premier élément pouvant recevoir le focus.
• La méthode la plus sûre consiste à inclure un bouton explicite afin que tous les utilisateurs puissent fermer la boîte de dialogue.

Exemples

Boîte de dialogue en HTML uniquement

• Exemple de création d’une boîte de dialogue non modale avec du HTML seul. En raison de l’attribut open, la boîte de dialogue est ouverte au chargement de la page.

Créer une boîte de dialogue modale

• Exemple d’ouverture d’une boîte de dialogue modale à l’aide de la méthode .showModal(). Elle peut être fermée avec la touche Esc ou avec le bouton "Close" dans la boîte de dialogue.

Gérer la valeur de retour d’une boîte de dialogue

• Exemple utilisant returnValue de l’élément <dialog>. Un formulaire peut être utilisé pour fermer la boîte de dialogue modale.

Fermer une boîte de dialogue avec des champs de formulaire obligatoires

• Lorsqu’un formulaire à l’intérieur de la boîte de dialogue contient des champs obligatoires, il est possible de la fermer à l’aide de l’attribut formnovalidate.

Animation d’une boîte de dialogue

• Il est possible d’animer une boîte de dialogue en animant la propriété display de l’élément <dialog>.

Résumé technique

• Catégories de contenu : contenu de flux, racine de section
• Contenu autorisé : contenu de flux
• Rôle ARIA implicite : dialog
• Interface DOM : HTMLDialogElement

Spécifications

• Standard HTML # the-dialog-element

Compatibilité des navigateurs

• L’élément <dialog> et l’attribut open sont entièrement pris en charge par la plupart des principaux navigateurs.

Voir aussi

• Interface HTMLDialogElement
• Événements close et cancel de HTMLDialogElement
• Attribut open de HTMLDialogElement
• Attribut global inert des éléments HTML
• Pseudo-élément CSS ::backdrop