Maîtriser l'élément HTMLlt;dialog> : une solution native pour les modaux

Élément : une solution native pour les modaux" />

Introduction : la balise de dialogue a été introduite dans HTML5, et vous savez ce que cela signifie, pas plus étant enchaîné à des solutions externes comme Bootstrap pour ces modaux et popups ! Avec l'élément natif de HTML5, vous pouvez créer des boîtes de dialogue, des invites et des fenêtres contextuelles directement dans votre code.

Créons un formulaire simple à l'intérieur d'une balise de dialogue et d'un bouton qui ouvrira comme par magie le formulaire lorsque vous cliquerez dessus.

Créer le dialogue (c'est plus simple que vous ne le pensez !) :

<dialog id="my-dialog">
    <div class="content">
      <form method="dialog">
        <p>Form inside a dialog</p>
        <div>
          <label for="name">Name: </label>
          <input type="text" id="name" name="name" />
        </div>
        <menu>
            <button type="submit">Submit</button>
            <button type="button">Cancel</button>
        </menu>
      </form>
    </div>
</dialog>
<button class="open-btn">Open Dialog</button>

Explication : Nous avons créé un formulaire niché à l'intérieur de celui-ci. Le formulaire demande un nom (car nommer les choses est, bien sûr, la partie la plus difficile de la programmation). Nous avons ajouté deux CTA : un pour soumettre le formulaire et un pour l'annuler. Facile comme bonjour.

Changeons la visibilité des boîtes de dialogue :

Les boîtes de dialogue sont timides par défaut (c'est-à-dire qu'elles sont masquées), mais n'ayez crainte ! Avec un peu de JavaScript, nous pouvons les mettre en action ! Voici le sortilège magique :

<script>
   const dialog = document.getElementById("my-dialog");

   function showDialog() {
     dialog.showModal();
   }

   function closeDialog() {
     dialog.close();
   }
</script>

Explication : Nous utilisons querySelector pour sélectionner notre boîte de dialogue. Ensuite, nous écrivons deux fonctions : une pour ouvrir la boîte de dialogue et une pour la fermer. Juste comme ça - la boîte de dialogue s'ouvre et se ferme sur votre commande !

Code HTML en action :

<dialog id="my-dialog" open="true">
   <div class="content">
     <form method="dialog">
       <p>Form inside a dialog</p>
       <div>
         <label for="name">Name: </label>
         <input type="text" id="name" name="name" />
       </div>
       <menu>
         <button type="submit">Submit</button>
         <button type="button" onclick="closeDialog()">Cancel</button>
       </menu>
     </form>
   </div>
</dialog>
<button class="open-btn" onclick="showDialog()">Open Dialog</button>

Explication :

1. Nous avons attaché closeDialog() au bouton "Annuler".
2. Le bouton "Ouvrir" utilise showDialog() pour ouvrir la boîte de dialogue.

Maintenant, je sais ce que vous pensez : "Mais que se passe-t-il si l'utilisateur clique en dehors du formulaire (sur l'arrière-plan) ?" Ne vous inquiétez pas, je vous soutiens !

Fermons la boîte de dialogue en cliquant sur la toile de fond :

dialog.addEventListener("click", function (event) {
     if (event.target === dialog) {
       closeDialog();
     }
});

Explication : Nous avons ajouté un écouteur d'événement à la boîte de dialogue elle-même qui ferme la boîte de dialogue si l'utilisateur clique sur l'arrière-plan. Le div de contenu est notre protection : si vous cliquez à l'intérieur, la boîte de dialogue reste en place. Mais cliquer dehors ? Pouf ! C'est parti.

Il est temps de styliser le dialogue :

Voici quelques styles de base pour égayer votre boîte de dialogue. Nous ajouterons également un peu de transparence en toile de fond pour ce look modal élégant afin qu'il n'éclipse pas tout ce qui l'entoure."

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#root {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}

#my-dialog {
  top: 50%;
  left: 50%;
  width: 60vw;
  position: absolute;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

#my-dialog .content {
  padding: 28px;
}

#my-dialog .content form {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

dialog::backdrop {
  opacity: 0.5;
  background-color: #898989;
}

.open-btn {
  padding: 5px 10px;
}

Essayez-le vous-même ! ?

Vous voulez voir le dialogue en action ? Découvrez ce bac à sable de code :

? Cliquez ici pour ouvrir le bac à sable de code !

Vous pouvez jouer avec le code, le modifier et regarder la magie opérer en direct. ?✨

Conclusion :

C'est ça ! Vous maîtrisez maintenant l’élément HTML5. Que vous souhaitiez créer un formulaire contextuel, une invite ou un formulaire complet, la balise est votre nouveau meilleur ami.

Mais avant de partir, voici un conseil de pro : vous devez créer un composant de dialogue réutilisable pour l'ensemble de votre projet.

Hé, n'oubliez pas d'aimer, de partager et de montrer un peu d'amour à ce post si cela vous a rendu la vie plus facile.

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!