Attention
Il est important de noter que lorsqu’un élément dialog est ouvert tout le
reste de la page est inerte (non cliquable et non focusable)
HTML : <dialog>
Publié le :
Introduction
Pendant longtemps, lorque l’on souhaitait créer une boîte de dialogue en HTML, on avait recours à des librairies Javascript ou des plugins.
Depuis HTML5, il est possible de créer des boîtes de dialogues en utilisant l’élément natif <dialog>.
L’usage est simple et permet de créer des boîtes de dialogues personnalisées et accessibles.
Voir la documentation officielle
Syntaxe
Pour créer une boîte de dialogue, on utilise l’élément HTML <dialog> et si on souhaite l’avoir ouverte par défaut, on ajoute l’attribut open.
<dialog open>
<!-- votre contenu -->
</dialog>Gestion de l’ouverture
Pour gérer l’ouverture de la boîte de dialogue, on peut utiliser les méthodes show() ou showModal().
La différence entre les deux est que showModal() va bloquer l’interaction avec le reste de la page tant que celle-ci est ouverte contrairement à show().
const dialog = document.querySelector('dialog');
const showButton = dialog.querySelector('+ button');
showButton.addEventListener('click', () => {
dialog.showModal();
});Gestion de la fermeture
Pour gérer la fermeture de la boîte de dialogue, on peut utiliser la méthode close() mais on peut également le faire à l’aide des formulaires.
const dialog = document.querySelector('dialog');
const closeButton = document.querySelector('dialog button');
closeButton.addEventListener('click', () => {
dialog.close();
});Remarque
On peut également fermer la boîte de dialogue avec la touche Échap, ce qui est un plus pour l’accessibilité.
Démo
<dialog id="dialog1">
<div class="dialog-inner" >
<button>Fermer</button>
<p>Salutations, à toutes et à tous !</p>
</div>
</dialog>
<button>Open dialog</button>const dialog = document.querySelector('#dialog1');
const showButton = document.querySelector('#dialog1 + button');
const closeButton = dialog.querySelector('button');
showButton.addEventListener('click', () => {
dialog.showModal();
});
closeButton.addEventListener('click', () => {
dialog.close();
});Don't
Il est déconseillé de gérer l’ouverture et la fermeture avec l’attribut open
Avec les formulaires
Nous avons dû utiliser du Javascript pour gérer la fermeture du formulaire mais cela n’est pas forcément nécessaire si notre boîte de dialogue est conçue avec un formulaire qui possède l’attribut method="dialog".
<dialog id="dialog2">
<div class="dialog-inner" >
<form >
<button autofocus formmethod="dialog">Fermer</button>
</form>
<p>Salutations, à toutes et à tous !</p>
</div>
</dialog>
<button onclick="document.querySelector('#dialog2').showModal()">Open dialog 2</button>Remarque
Généralement, on affecte l’attribut autofocus sur lequel l’utilisateur est
censé effectuer la première action.
l’attribut formmethod
On peut également utiliser l’attribut formmethod="dialog" sur le bouton de fermeture
<dialog>
<form>
<button formmethod="dialog">Fermer</button>
</form>
</dialog>Valeur de retour
Lors de la fermeture d’une boîte de dialogue contenant un formulaire, si celui-ci contient un champ et un bouton de type submit, sa valeur est retournée grâce à la propriété returnValue .
Nom saisi :
<dialog id="dialog3">
<div class="dialog-inner" >
<form method="dialog">
<label for="name">Votre nom</label>
<input id="name" name="name" type="text" value="" />
<button class="confirm" autofocus value="saisie vide" >Valider</button>
</form>
</div>
</dialog>
<button onclick="openDialog()">Open dialog 3</button>
Nom saisi : <output></output>const output = document.querySelector("output");
const input = document.querySelector('input[name="name"]');
const btn = document.querySelector('.confirm');
const dialog3 = document.querySelector('#dialog3');
const form = dialog3.querySelector('#dialog3');
input.addEventListener("input", (e) => {
btn.value = input.value;
});
dialog3.addEventListener("close", () => {
output.value = dialog3.returnValue;
});
function openDialog() {
document.querySelector('#dialog3').showModal();
output.value = '';
input.value = '';
btn.value = 'saisie vide';
}
Customisation CSS
L’élément <dialog> est personnalisable avec le CSS, il existe quelques pseudo-classes :
::backdrop: permet de cibler l’arrière-plan de la boîte de dialogue:open: permet de cibler la boîte de dialogue ouverte:closed: permet de cibler la boîte de dialogue fermée
On peut par exemple :
- ajouter un effet de flou sur l’arrière-plan avec la propriété
backdrop-filter - ajouter une animation de fade-in sur la boîte de dialogue
Remarque
On pourra améliorer les effets d’apparition avec la propriété
@starting-style que nous verrons dans un autre article.
Fermeture sur le backdrop
Nativement, il n’est pas possible de fermer une boîte de dialogue en cliquant sur l’arrière-plan. Pourtant, on avait l’habitude de fermer une boîte de dialogue en cliquant en dehors de celle-ci.
Voici un exemple de code pour fermer une boîte de dialogue en cliquant sur l’arrière-plan.
<dialog id="monid" onclick="document.querySelector(`#monid`).close()">
<div class="dialog-inner" onclick="event.stopPropagation();">
<!-- le contenu -->
</div>
</dialog>L’astuce consiste à empêcher la propagation de l’événement click sur le contenu de la boîte de dialogue en ajoutant un élément intermédiaire.