1. Description de la balise <dialog>
La balise HTML <dialog> est une balise introduite dans HTML5 qui est utilisée pour créer des boîtes de dialogue modales, c'est-à-dire des fenêtres contextuelles qui s'affichent par-dessus le contenu principal d'une page web et qui bloquent l'interaction avec le reste de la page tant qu'elles sont ouvertes. Les boîtes de dialogue sont couramment utilisées pour afficher des informations importantes, des messages d'erreur, des formulaires de connexion, ou d'autres éléments interactifs qui nécessitent l'attention de l'utilisateur avant de pouvoir continuer à interagir avec la page.
2. Caractéristiques de la balise <dialog>
Voici quelques caractéristiques clés de la balise <dialog> :
- Modèle de contenu: La balise <dialog> peut contenir n'importe quel contenu HTML valide, y compris des formulaires, des boutons, du texte, des images, etc.
- open: Cet attribut booléen indique si la boîte de dialogue est ouverte ou fermée. Si l'attribut open est présent, la boîte de dialogue est ouverte. Pour la fermer, vous pouvez le retirer ou utiliser JavaScript pour le définir à false.
- Comportement modale: Lorsqu'une boîte de dialogue est ouverte, elle bloque l'interaction avec le reste de la page, obligeant l'utilisateur à traiter d'abord la boîte de dialogue avant de revenir à la page principale.
- JavaScript : Pour manipuler le comportement de la balise <dialog>, vous pouvez utiliser JavaScript. Vous pouvez l'ouvrir, la fermer ou écouter des événements liés à son état, comme l'événement close lorsqu'elle est fermée.
3. Exemples d'usages de la balise <dialog>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- nous utilisons la balise <dialog> pour créer une boîte de dialogue avec un bouton d'ouverture et un bouton de fermeture, et un bouton de fermeture, et nous utilisons JavaScript pour gérer l'ouverture et la fermeture de la boîte de dialogue.--> <dialog id="maBoiteDeDialogue"> <h2>Titre de la boîte de dialogue</h2> <p>Contenu de la boîte de dialogue.</p> <button id="fermerBoiteDeDialogue">Fermer</button> </dialog> <button id="ouvrirBoiteDeDialogue">Ouvrir la boîte de dialogue</button> <script> const boiteDeDialogue = document.getElementById('maBoiteDeDialogue'); const ouvrirBouton = document.getElementById('ouvrirBoiteDeDialogue'); const fermerBouton = document.getElementById('fermerBoiteDeDialogue'); ouvrirBouton.addEventListener('click', () => { boiteDeDialogue.showModal(); }); fermerBouton.addEventListener('click', () => { boiteDeDialogue.close(); }); </script> |
Ce qui affiche au navigateur: (un bouton pour ouvrir la boite de dialogue et un bouton pour la fermer)
Younes Derfoufi
CRMEF OUJDA
1 thought on “La balise <dialog> HTML”