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 :
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">
...