Une boîte de dialogue modale est un type particulier de fenêtre pop-up sur une page Web: un pop-up qui interrompt l'utilisateur pour qu'il se concentre sur lui-même. Il existe des cas d'utilisation valides pour afficher une boîte de dialogue, mais une grande attention doit être prise au préalable. 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 interagi) 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, est masqué par un fond semi-transparent.
L'élément HTML <dialog> sémantique permettant de créer une boîte de dialogue est fourni avec la sémantique, les interactions avec le clavier, ainsi que toutes les propriétés et méthodes de l'interface HTMLDialogElement.
Boîtes de dialogue modales
Voici un exemple de <dialog> modale. Ouvrez la boîte de dialogue avec le bouton "Ouvrir la boîte de dialogue modale". Une fois la boîte de dialogue ouverte, vous pouvez la fermer de trois manières: en utilisant la touche Échap, en envoyant un formulaire avec un bouton avec formmethod="dialog" défini (ou si le formulaire lui-même a method="dialog") et 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 */
Comme ce <dialog> a été ouvert 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 tous les éléments, à l'exception de la boîte de dialogue elle-même. Si vous pointez sur l'interface utilisateur 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 est ouverte, le curseur y est placé. Le curseur 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 sur la touche tab à plusieurs reprises, vous remarquerez que seul le contenu de la boîte de dialogue peut être sélectionné tant que 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 (modale ou non), le curseur est placé sur l'élément qui a ouvert la boîte de dialogue. Si vous ouvrez une boîte de dialogue qui n'est pas basée sur une action de l'utilisateur de manière programmatique, reconsidérez votre demande. Si vous le devez, assurez-vous de replacer le curseur là où il se trouvait avant l'ouverture de la boîte de dialogue, en particulier si l'utilisateur la ferme sans interagir avec elle.
Il existe un attribut inert global qui 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 le reste à l'exception de 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 qui s'affiche lorsque l'API FullScreen est utilisée, par exemple lors du visionnage d'une vidéo en mode plein écran qui n'a pas le même format que l'écran ou le moniteur.
Boîtes de dialogue non modales
HTMLDialogElement.show() ouvre également une boîte de dialogue, mais sans ajouter d'arrière-plan ni rendre inerte quoi que ce soit.
La touche Échap ne ferme pas les boîtes de dialogue non modales. Pour cette raison, il est encore plus important d'inclure une méthode permettant de fermer la boîte de dialogue non modale. Ainsi, si plus la boîte de dialogue se trouve en dehors de la boîte de dialogue, le curseur sera placé sur l'élément qui a ouvert la boîte de dialogue, ce qui n'offrira peut-être pas 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, vous devez le considérer comme obligatoire. La touche Échap ferme une boîte de dialogue modale, mais pas une boîte de dialogue non modale. Un bouton visible qui reçoit le focus améliore l'accessibilité et l'expérience utilisateur.
Fermer une boîte de dialogue
La méthode HTMLDialogElement.close() n'est pas nécessaire pour fermer une boîte de dialogue. Vous n'avez pas du tout 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 un document via la méthode dialog, l'état des données saisies par l'utilisateur est conservé. Lors d'un événement d'envoi (le formulaire passe par la validation de la contrainte, sauf si novalidate est défini), 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é que l'attribut autofocus est défini sur l'<button> de fermeture dans cet exemple. Les éléments dont l'attribut autofocus est défini dans un <dialog> ne sont pas sélectionnés 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 à l'ouverture de la boîte de dialogue.
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 l'attribut autofocus est défini pour un autre élément de la boîte de dialogue. Définir l'attribut autofocus sur le bouton de fermeture permet de s'assurer qu'il est sélectionné lorsque la boîte de dialogue est ouverte. Cependant, l'ajout de autofocus dans une <dialog> ne doit être fait qu'avec beaucoup de considération. Tous les éléments de la séquence précédant l'élément sélectionné automatiquement sont ignorés.
Cet attribut est abordé plus en détail dans la leçon dédiée.
L'interface HTMLDialogElement inclut une propriété returnValue. L'envoi d'un formulaire avec un method="dialog" définit returnValue sur l'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 peut faire l'objet d'une interaction. Lorsqu'une boîte de dialogue est ouverte en ajoutant l'attribut open plutôt que via .show() ou .showModal(), la boîte de dialogue est sans fenêtre modale. La propriété HTMLDialogElement.open renvoie true ou false, selon que la boîte de dialogue est disponible pour l'interaction, qu'elle soit modale ou non.
Bien que JavaScript soit la méthode privilégiée pour ouvrir une boîte de dialogue, inclure l'attribut open lors du chargement de la page, puis le supprimer avec .close(), peut vous aider à vous assurer que la boîte de dialogue est disponible même si JavaScript ne l'est pas.
Informations supplémentaires
Ne pas utiliser tabindex
L'élément qui est activé pour ouvrir la boîte de dialogue et le bouton de fermeture qu'il contient (et éventuellement d'autres contenus) peuvent être sélectionnés et sont interactifs. L'élément <dialog> n'est pas interactif et n'est pas sélectionné. 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 communiquant 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 du texte visible peut fournir le nom accessible, ajoutez aria-labelledby="idOfLabelingText".
Paramètres CSS par défaut
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 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.
Testez vos connaissances
Testez vos connaissances sur l'élément de boîte de dialogue.
Comment définissez-vous le style de la zone derrière la boîte de dialogue ?
::background.::backdrop.background.