La balise dialog : créer des modales modernes et accessibles

Comprendre la balise <dialog> en HTML

Définition et utilité de <dialog>

La balise <dialog> est une solution native pour créer des fenêtres modales en HTML. Elle permet d’afficher des boîtes de dialogue, des popups, ou encore des messages de confirmation, sans avoir besoin de JavaScript complexe.

Avantages par rapport aux autres méthodes de création de modales

Contrairement aux modales traditionnelles basées sur div et JavaScript, <dialog> offre plusieurs avantages SEO et UX :

• Accessibilité améliorée : Gère automatiquement la navigation clavier et le focus utilisateur.
• Meilleure performance : Moins de scripts et de code = chargement plus rapide.
• Facilité d’utilisation : Une simple ligne de code active une modale.
• Support natif : Fonctionne directement dans les navigateurs modernes.

Créer une modale basique avec <dialog>

Cas pratique : création d’une modale à partir de <dialog>

Pour commencer, nous allons créer la base de notre modale :

<dialog></dialog>

Puis, on crée une structure simple avec un title un sous-titre et un paragraphe en rajoutant un button pour fermer puis le contenu de la modale :

<button id="openModal">voir la modal</button>
<dialog class="container-modal">
    <div class="containerCloseModal">
        <button id="closeModal">x</button>
    </div>
<h1>C'est une modal !</h1>
<p>c'est génial !</p>
</dialog>

A voir : Comment insérez des médias en HTML

Personnalisons l’apparence de la modale

Pour commencer, on va styliser notre bouton pour ouvrir la modale:

button#openModal{
background-color:#00b6ff;
padding:10px 5px;
border:none;
border-radius:5px;
font-weight:500;
color:#fff;
}

Puis la modale en elle-même :

dialog.container-modal{
border:none;
position:relative;
border-radius:8px;
}

On s’occupe du bouton pour fermer la modale :

.containerCloseModal{
    position:absolute;
    top:0;
    right:0;
    transform:translate(-3px,3px)
    
}
#closeModal{
    background-color:red;
    color:white;
    border-radius:50%;
    border:none;
}

Utilisation du pseudo-élément ::backdrop

Quand une balise <dialog> est activé, nous pouvons utiliser le pseudo-élément ::backdrop. Cette propriété va désactiver les interactions. Mais pour marquer ceci, nous pouvons utiliser un fond noir semi-transparent :

dialog.container-modal::backdrop{
    background-color:rgba(0,0,0,0.5)
}

A voir : Coder une Navbar en HTML et CSS: Guide pratique.

Ajouter de l’interactivité aux modales dialog

Utilisation de JavaScript

C’est bien jolie, mais pour l’instant notre bouton pour activer la modale ne fonctionne pas. L’idée, c’est de mettre un petit peu de JavaScript pour activer la modale. Du coup, on vient sélectionner les boutons et la modale :

const openModal = document.querySelector('button#openModal');
const modal = document.querySelector('dialog.container-modal');
const closeModal = document.querySelector("#closeModal");

Puis, on écoute les clics sur les boutons :

openModal.addEventListener('click', () => {
    modal.showModal(); /*methode pour ouvrir la modal*/
});

closeModal.addEventListener('click',()=>{
    modal.close(); /* methode pour fermer la modal*/
});

Conclusion

Et voilà, plus besoin de se prendre la tête à coder des modales à l’ancienne.