L'élément de boîte de dialogue est utile pour représenter tout type de boîte de dialogue en HTML. Découvrez comment il fonctionne.
Une boîte de dialogue modale est un type spécial de pop-up sur une page Web: un pop-up qui interrompt l'utilisateur pour se concentrer sur lui-même. Il existe certains cas d'utilisation valides pour afficher une boîte de dialogue, mais vous devez bien réfléchir avant de le faire. Les boîtes de dialogue modales obligent les utilisateurs à se concentrer sur un contenu spécifique et, au moins temporairement, à ignorer le reste de la page.
Les boîtes de dialogue peuvent être modales (seul le contenu de la boîte de dialogue peut être utilisé) ou non modales (il est toujours possible d'interagir avec le contenu en dehors de la boîte de dialogue). Les boîtes de dialogue modales s'affichent au-dessus du reste du contenu de la page. Le reste de la page est inerte et, par défaut, masqué par un arrière-plan semi-transparent.
L'élément HTML sémantique <dialog> permettant de créer une boîte de dialogue est fourni avec des sémantiques, des interactions avec le clavier et toutes les propriétés et méthodes de l'interface HTMLDialogElement.
Boîtes de dialogue modales
Voici un exemple de <dialog> modal. Ouvrez la boîte de dialogue à l'aide du bouton "Ouvrir la boîte de dialogue modale". Une fois ouverte, la boîte de dialogue peut être fermée de trois manières: à l'aide de la touche Échap, en envoyant un formulaire avec un bouton sur lequel formmethod="dialog" est défini (ou si le formulaire lui-même est défini sur method="dialog") et à l'aide de la méthode HTMLDialogElement.close().
HTMLDialogElement comporte trois méthodes principales, ainsi que toutes les méthodes héritées de HTMLElement.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
Étant donné que cette <dialog> a été ouverte via la méthode HTMLDialogElement.showModal(), il s'agit d'une boîte de dialogue modale. L'ouverture d'une boîte de dialogue modale désactive et masque tout ce qui n'est pas la boîte de dialogue elle-même. Si vous pointez sur l'UI en dehors de la boîte de dialogue, vous remarquerez que tous les éléments se comportent comme si pointer-events: none; était défini. Même le bouton qui ouvre la boîte de dialogue ne réagit pas aux interactions.
Lorsque la boîte de dialogue s'ouvre, le focus y est placé. Le focus est placé sur le premier élément de l'ordre de navigation séquentiel au clavier dans cette boîte de dialogue.
Si vous appuyez plusieurs fois sur la touche tab, vous remarquerez que seul le contenu de la boîte de dialogue peut être sélectionné lorsque la boîte de dialogue modale est ouverte. Tout ce qui se trouve en dehors de la boîte de dialogue modale est inerte tant que la boîte de dialogue est ouverte.
Lorsqu'une boîte de dialogue est fermée, qu'elle soit modale ou non, le focus est rétabli sur l'élément qui l'a ouverte. Si vous ouvrez de manière programmatique une boîte de dialogue qui ne repose pas sur une action de l'utilisateur, réexaminez votre choix. Si nécessaire, assurez-vous que le focus est rétabli à l'emplacement où il se trouvait avant l'ouverture de la boîte de dialogue, en particulier si l'utilisateur la ferme sans interagir avec elle.
Un attribut inert global peut être utilisé pour désactiver un élément et tous ses descendants, à l'exception de toute boîte de dialogue active. Lorsqu'une boîte de dialogue modale est ouverte à l'aide de showModal(), l'inertie ou la désactivation est sans frais. L'attribut n'est pas défini explicitement.
Le fond qui masque tout sauf la boîte de dialogue peut être stylisé à l'aide du pseudo-élément ::backdrop. Le fond ne s'affiche que lorsqu'un <dialog> est affiché avec la méthode .showModal(). Ce pseudo-élément correspond à tous les arrière-plans, y compris celui affiché lorsque l'API Fullscreen est utilisée, par exemple lorsque vous regardez une vidéo en mode plein écran qui n'a pas le même format que l'écran ou l'écran.
Boîtes de dialogue non modales
HTMLDialogElement.show() ouvre également une boîte de dialogue, mais sans ajouter de toile de fond ni rendre quoi que ce soit inerte.
La touche Échap ne ferme pas les boîtes de dialogue non modales. C'est pourquoi il est encore plus important de vous assurer d'inclure une méthode permettant de fermer la boîte de dialogue non modale. Si le bouton de fermeture se trouve en dehors de la boîte de dialogue, notez que le focus sera placé sur l'élément qui a ouvert la boîte de dialogue, ce qui n'est pas forcément la meilleure expérience utilisateur.
Bien qu'un bouton permettant de fermer la boîte de dialogue ne soit pas officiellement requis par la spécification, considérez-le comme obligatoire. La touche Échap ferme une boîte de dialogue modale, mais pas une boîte de dialogue non modale. Un bouton visible pouvant recevoir la sélection améliore l'accessibilité et l'expérience utilisateur.
Fermer une boîte de dialogue
Vous n'avez pas besoin de la méthode HTMLDialogElement.close() pour fermer une boîte de dialogue. Vous n'avez pas besoin de JavaScript. Pour fermer <dialog> sans JavaScript, incluez un formulaire avec une méthode de boîte de dialogue en définissant method="dialog" sur <form> ou formmethod="dialog" sur le bouton.
Lorsqu'un utilisateur envoie des données via la méthode dialog, l'état des données saisies par l'utilisateur est conservé. Lorsqu'un événement de soumission se produit, le formulaire est validé (sauf si novalidate est défini), mais les données utilisateur ne sont ni effacées ni envoyées.
Un bouton de fermeture sans JavaScript peut être écrit comme suit:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
Vous avez peut-être remarqué l'attribut autofocus défini sur la fermeture <button> dans cet exemple. Les éléments dont l'attribut autofocus est défini dans un <dialog> ne recevront pas la sélection lors du chargement de la page (sauf si la page est chargée avec la boîte de dialogue visible). Toutefois, ils seront sélectionnés lorsque la boîte de dialogue s'ouvrira.
Par défaut, lorsqu'une boîte de dialogue est ouverte, le premier élément sélectionnable de la boîte de dialogue est sélectionné, sauf si un autre élément de la boîte de dialogue a l'attribut autofocus défini. Définir l'attribut autofocus sur le bouton de fermeture garantit qu'il reçoit la sélection lorsque la boîte de dialogue est ouverte. Toutefois, l'inclusion de autofocus dans un <dialog> ne doit être effectuée qu'après mûre réflexion. Tous les éléments de la séquence qui précèdent l'élément mis au point automatique sont ignorés.
Nous en parlerons plus en détail dans la leçon ciblée.
L'interface HTMLDialogElement inclut une propriété returnValue. L'envoi d'un formulaire avec un method="dialog" définit le returnValue sur le name, le cas échéant, du bouton d'envoi utilisé pour envoyer le formulaire. Si nous avions écrit <button type="submit" name="toasty">close</button>, returnValue serait toasty.
Lorsqu'une boîte de dialogue est ouverte, l'attribut booléen open est présent, ce qui signifie que la boîte de dialogue est active et que vous pouvez interagir avec elle. Lorsqu'une boîte de dialogue est ouverte en ajoutant l'attribut open plutôt que via .show() ou .showModal(), elle n'est pas modale. La propriété HTMLDialogElement.open renvoie true ou false, selon que la boîte de dialogue est disponible pour l'interaction ou non, et non selon qu'elle est modale ou non.
Bien que JavaScript soit la méthode privilégiée pour ouvrir une boîte de dialogue, l'inclusion de l'attribut open au chargement de la page, puis sa suppression avec .close(), peut aider à s'assurer que la boîte de dialogue est disponible même lorsque JavaScript ne l'est pas.
Informations supplémentaires
Ne pas utiliser tabindex
L'élément activé pour ouvrir la boîte de dialogue et le bouton de fermeture qu'elle contient (et éventuellement d'autres contenus) peuvent recevoir la sélection et sont interactifs. L'élément <dialog> n'est pas interactif et ne reçoit pas la sélection. N'ajoutez pas la propriété tabindex à la boîte de dialogue elle-même.
Rôles ARIA
Le rôle implicite est dialog. Si la boîte de dialogue est une fenêtre de confirmation qui communique un message important nécessitant une confirmation ou une autre réponse de l'utilisateur, définissez role="alertdialog".
La boîte de dialogue doit également avoir un nom accessible. Si un texte visible peut fournir le nom accessible, ajoutez aria-labelledby="idOfLabelingText".
Valeurs par défaut CSS
Notez que les navigateurs fournissent un style par défaut pour dialog. Firefox, Chrome et Edge définissent color: CanvasText; background-color: Canvas; et Safari définit color: black; background-color: white; dans leurs feuilles de style d'user-agent. Le color est hérité de dialog et non de body ou :root, ce qui peut être inattendu. La propriété background-color n'est pas héritée.
Vérifier vos connaissances
Testez vos connaissances sur l'élément de boîte de dialogue.
Comment stylisez-vous la zone située derrière la boîte de dialogue ?
::background.::backdrop.background.