La balise <dialog> HTML

Contenu du cours

Description de la balise <dialog>
Caractéristiques de la balise <dialog>
Exemples d'usages de la balise <dialog>

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>

<!-- 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>

<!-- 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.-->

<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>

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)

html description de la balise dialog

Younes Derfoufi
CRMEF OUJDA

Post Views: 616

Acheter sur Très Facile !

La balise <dialog> HTML

1. Description de la balise <dialog>

2. Caractéristiques de la balise <dialog>

3. Exemples d'usages de la balise <dialog>

Langage Python pour les Nuls, 3e éd - John Paul Mueller

Tenda Routeur WiFi 6 RX12 Pro, Router Tenda WiFi AX3000 Bi-Bande, 5 * 6dBi Antennes à Haut Puissance, Large Couverture,

Python pour les Nuls, 4è édition - John Paul Mueller

1 thought on “La balise <dialog> HTML”

Leave a Reply Cancel reply