Afficher une modale sans librairie externe

Introduction

L’affichage de modales est une fonctionnalité couramment utilisée dans les applications web pour présenter des informations importantes ou demander une interaction utilisateur spécifique. Alors que de nombreuses librairies externes offrent des fonctionnalités de modales, il est également possible de créer une modale sans utiliser de librairie externe en exploitant la balise HTML <dialog></dialog>. Dans cet article, nous explorerons comment créer et afficher une modale en utilisant uniquement la balise <dialog></dialog> intégrée à HTML5, offrant ainsi une solution légère et simple pour vos besoins de modales.

Introduction à la balise <dialog></dialog> :

La balise <dialog></dialog> fait partie de la spécification HTML5 et est conçue spécifiquement pour créer des boîtes de dialogue modales. Elle fournit une structure de base pour créer une modale sans nécessiter de code JavaScript supplémentaire. Cependant, il est important de noter que la prise en charge de la balise <dialog></dialog> peut varier selon les navigateurs, il convient donc de vérifier sa compatibilité avec votre public cible.

Structure de base de la modale

Pour créer une modale, vous pouvez envelopper votre contenu dans une balise <dialog></dialog>. Par exemple :

<dialog id="registrationModal">
   <!-- Contenu de la modale -->
</dialog>

Ajout de fonctionnalités et de styles

Vous pouvez personnaliser l’apparence et le comportement de la modale en utilisant des styles CSS. Vous pouvez définir la taille, la position, les transitions et autres propriétés visuelles pour s’adapter à vos besoins. Utilisez les sélecteurs CSS pour cibler la balise <dialog></dialog> et appliquer les styles souhaités.

Gérer les événements

La balise <dialog></dialog> prend également en charge des événements intégrés, par exemple "close" qui peut être utilisé pour effectuer des actions spécifiques lors de la fermeture de la modale. Vous pouvez ajouter des écouteurs d’événements pour capturer ces événements et exécuter du code JavaScript en conséquence.

Exemple

L’exemple ci-dessous permet d’afficher un formulaire d’inscription dans une modale.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, 
  initial-scale=1.0">
  <title>Modal Demo</title>
</head>
<body>
  <h1>Cliquez sur le bouton pour vous inscrire</h1>

  <button id="openRegistrationModal">S'inscrire</button>

  <dialog id="registrationModal">
    <h3>Formulaire d'inscription</h3>
    <form action="#" method="post">
      Nom: <input type="text" name="nom"> <br>
      Prénom : <input type="text" name="prenom"> <br>
      Email: <input type="email" name="email"> <br> <br>
      <button>Soumettre</button>

      <button value="cancel" formmethod="dialog">
        Fermeture implicite</button>

      <button type="button" id="closeRegistrationModal">
        Fermeture explicite</button>
    </form>    
  </dialog>

  <script type="text/javascript">
    const openModal = document.getElementById('openRegistrationModal');
    const closeModal = document.getElementById('closeRegistrationModal');

    const modal = document.getElementById('registrationModal');

    openModal.addEventListener('click', function(event) {
      modal.showModal();
    });

    closeModal.addEventListener('click', function(event) {
      modal.close();
    });
  </script>
</body>
</html>

Conclusion

La balise <dialog></dialog> fournit une solution simple et légère pour afficher des modales sans avoir recours à des librairies externes. En utilisant cette balise HTML5, vous pouvez créer des modales avec un contrôle total sur leur apparence et leur comportement. Gardez à l’esprit que la compatibilité des navigateurs peut varier, alors assurez-vous de tester votre solution sur différents navigateurs pour une expérience utilisateur cohérente.

Darius Tsafack

Darius est un ingénieur logiciel et formateur, passionné par le développement logiciel, le cloud et le DevOps. Il prend beaucoup de plaisir à partager ses connaissances avec les autres sur ces sujets.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Appuyez sur ÉCHAP pour fermer