HTML : <dialog>

Introduction 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 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 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 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();
});

Démo 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();
});

Avec les formulaires 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>  

l’attribut formmethod 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 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 .

 <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 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

dialog {
  
  &::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
  }

  &[open],
  &[open]::backdrop {
      animation: fadein 500ms linear forwards;
  }
  
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Fermeture sur le backdrop 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.