Le récent standard HTML 5.2 nous apporte un nouvel élément appelé <dialog>. Cela nous permet de créer des boîtes de dialogue modales qui peuvent être rendues interactives avec un peu de JavaScript.
L’utilisation de l’élément est très simple, avec sa forme de base ressemblant à ceci:
<dialog open = "">
C'est une boîte de dialogue!
</ dialog>
L’attribut supplémentaire « open » s’assure que la boîte de dialogue est réellement affichée. Sans l’attribut, même l’ouverture de la boîte vous obligerait à utiliser JavaScript. Par défaut, sans l’utilisation de CSS, la boîte de dialogue semble très peu attrayante.
La boite de dialogue se place au milieu de l’écran, encadré par une bordure noire, avec une taille déterminée par le contenu de la boîte. La superposition de cette boite de dialogue empêche toute interaction avec le contenu en dehors de la boîte.
Dans l’élément Dialog, utilisez d’autres éléments HTML pour structurer votre boîte de dialogue et créez-le en fonction de vos besoins. Théoriquement, il n’y a pas de limite à votre imagination.
Cependant, sans JavaScript, cet élément a peu d’utilité, car l’affichage d’une fenêtre de dialogue statique ouverte ou fermée n’est pas très judicieux. Les méthodes JavaScript showModal () et close () vous permettent de contrôler l’attribut précédemment mentionné.
La première méthode ajoute l’attribut, en ouvrant la boîte de dialogue. La deuxième méthode supprime l’attribut, en fermant la boîte.
Bien sûr, ceci n’est pas nouveau, Chrome prend en charge cette implémentation depuis 2014. Sous Firefox, vous pouvez activer ce support. Microsoft pense l’implémenter un jour sous Edge. D’autres n’y participent pas du tout. Utilisez ce polyfill JavaScript pour forcer les réticents à coopérer. Cependant, il a été récemment ajouté à la norme, ce qui en fait une partie de HTML 5.2.