Sommaire

Utiliser une Boîte de dialogueboîte de dialogue

Toujours dans la même optique de gagner de la place dans une page web, vous pouvez utiliser l’élément <dialog> qui permet d’afficher des informations supplémentaires dans une boîte de dialogue qui s’ouvrira par une action de l’utilisateur.

Si cet élément d’interaction est intéressant, il n’est cependant que reconnu par Google Chrome.

Voici les compatibilités indiquées par le site Can I Use :

Images/C2-6-001.png

Pour exploiter au mieux l’interaction avec les visiteurs, nous allons utiliser un petit script JavaScriptJavaScript qui permettra aux visiteurs d’ouvrir et de fermer la boîte de dialogue en cliquant sur des boutons. En effet, par défaut, la boîte de dialogue est déjà affichée lors du chargement de la page. C’est l’attribut booléen open qui le permet.

Voici la structure de cet élément :

<!DOCTYPE HTML> 
<html> 
<head> 
   <meta charset="utf-8"> 
   <title>Boîte de dialogue</title> 
</head> 
<body> 
   <h3>Afficher et fermer la boîte de dialogue</h3> 
   <button id="ouvrir">Ouvrir</button> 
   <button id="fermer">Fermer</button> 
   <dialog id="boite_dialogue"> 
    ...