Créer des fenêtres modales avec la balise HTML dialog

Introduction

Dans ce laboratoire, vous allez apprendre à utiliser la balise HTML <dialog> pour créer une fenêtre modale ou un pop-up sur une page web. Nous allons vous guider tout au long du processus étape par étape de création d'une boîte de dialogue d'exemple à l'aide de la balise <dialog>.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/FormsandInputGroup -.-> html/forms("Form Elements") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70742{{"Boîte/Fenêtre de dialogue HTML"}} html/head_elems -.-> lab-70742{{"Boîte/Fenêtre de dialogue HTML"}} html/layout -.-> lab-70742{{"Boîte/Fenêtre de dialogue HTML"}} html/doc_flow -.-> lab-70742{{"Boîte/Fenêtre de dialogue HTML"}} html/forms -.-> lab-70742{{"Boîte/Fenêtre de dialogue HTML"}} html/inter_elems -.-> lab-70742{{"Boîte/Fenêtre de dialogue HTML"}} end

Ajout de la balise dialog dans index.html

La balise <dialog> nécessite une balise d'ouverture et une balise de fermeture. Dans cette étape, nous allons ajouter la structure HTML de base et la balise <dialog> au fichier index.html.

<!doctype html>
<html>
  <head>
    <title>Fenêtre modale utilisant la balise HTML dialog</title>
  </head>
  <body>
    <h1>Fenêtre modale utilisant la balise HTML dialog</h1>

    <!-- Ajout de la balise dialog -->
    <dialog>
      <p>Voici une boîte de dialogue d'exemple!</p>
    </dialog>
  </body>
</html>

Ajout d'un bouton pour ouvrir la boîte de dialogue

Dans cette étape, nous allons créer un bouton pour ouvrir la boîte de dialogue. Nous utiliserons JavaScript pour ouvrir et fermer la boîte de dialogue lorsque le bouton est cliqué.

<!doctype html>
<html>
  <head>
    <title>Fenêtre modale utilisant la balise HTML dialog</title>
  </head>
  <body>
    <h1>Fenêtre modale utilisant la balise HTML dialog</h1>

    <!-- Ajout de la balise dialog -->
    <dialog id="dialog">
      <p>Voici une boîte de dialogue d'exemple!</p>
    </dialog>

    <!-- Ajout d'un bouton pour ouvrir la boîte de dialogue -->
    <button onclick="document.getElementById('dialog').showModal()">
      Ouvrir la boîte de dialogue
    </button>

    <!-- Ajout d'un bouton pour fermer la boîte de dialogue, qui est masquée par défaut -->
    <button onclick="document.getElementById('dialog').close()">
      Fermer la boîte de dialogue
    </button>
  </body>
</html>

Ajout de styles CSS à la boîte de dialogue

Dans cette étape, nous allons ajouter quelques styles CSS à la boîte de dialogue pour la rendre plus présentable.

<!doctype html>
<html>
  <head>
    <title>Fenêtre modale utilisant la balise HTML dialog</title>

    <!-- Ajout de styles pour la boîte de dialogue -->
    <style>
      dialog {
        width: 300px;
        height: 150px;
        background-color: #f2f2f2;
        padding: 20px;
        border: 2px solid #000;
        border-radius: 10px;
        box-shadow: 0px 0px 10px #000;
        font-family: Arial, san-serif;
        font-size: 18px;
        color: #000;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Fenêtre modale utilisant la balise HTML dialog</h1>

    <!-- Ajout de la balise dialog -->
    <dialog id="dialog">
      <p>Voici une boîte de dialogue d'exemple!</p>
    </dialog>

    <!-- Ajout d'un bouton pour ouvrir la boîte de dialogue -->
    <button onclick="document.getElementById('dialog').showModal()">
      Ouvrir la boîte de dialogue
    </button>

    <!-- Ajout d'un bouton pour fermer la boîte de dialogue, qui est masquée par défaut  -->
    <button onclick="document.getElementById('dialog').close()">
      Fermer la boîte de dialogue
    </button>
  </body>
</html>

Maintenant, notre code HTML est complet pour créer une fenêtre modale à l'aide de la balise HTML <dialog>.

Résumé

Vous avez réussi à compléter le laboratoire sur la création d'une fenêtre modale à l'aide de la balise HTML <dialog>. Dans ce laboratoire, nous avons discuté étape par étape du processus de création d'une boîte de dialogue d'exemple à l'aide de la balise HTML <dialog>. Nous avons ajouté un bouton simple pour ouvrir et fermer la boîte de dialogue à l'aide de JavaScript. De plus, nous avons également ajouté quelques styles CSS de base pour améliorer l'apparence de la boîte de dialogue.