Les dialogues et les modaux font partie intégrante de la plupart des applications Web. Bien que les construire à la main ne soit pas une tâche complexe, c'est une tâche qui devient rapidement fastidieuse pour tout développeur Web. L'alternative habituelle à leur construction à la main est d'utiliser un composant construit par quelqu'un d'autre.
Il y a quelques problèmes avec cette approche, cependant. Il y a tellement d'options qu'il devient difficile de savoir quel composant serait le mieux à utiliser, et personnaliser l'apparence de tels composants peut parfois être aussi fastidieux que de créer une boîte de dialogue par la main. Heureusement, il existe une autre alternative: l'élément de dialogue HTML.
Qu'est-ce que l'élément de dialogue ?
L'élément de dialogue HTML est une balise HTML intégrée (comme div ou span), qui permet aux développeurs de créer des boîtes de dialogue et des modaux personnalisés. L'élément de dialogue existe dans Chrome et Opera depuis 2014, mais ce n'est que récemment qu'il a été pris en charge par tous les principaux navigateurs.
Pourquoi utiliser l'élément de dialogue ?
La principale raison d'utiliser l'élément de dialogue est la commodité. Il facilite la création de boîtes de dialogue qui peuvent apparaître en ligne ou apparaître sous forme de modaux, avec rien de plus qu'une seule balise HTML et quelques lignes de JavaScript.
L'élément dialog supprime le besoin de créer et de déboguer une boîte de dialogue personnalisée ou d'importer le composant de quelqu'un d'autre. Il est également très facile de styliser avec CSS.
Prise en charge du navigateur pour l'élément de dialogue
Malheureusement, la prise en charge du navigateur pour l'élément de dialogue pourrait être meilleure. Il est pris en charge dans les dernières versions de tous les principaux navigateurs à partir de mars 2022, avec quelques mises en garde.
Tout navigateur Firefox antérieur à Firefox 98 ne le prendra en charge que s'il est activé manuellement dans les paramètres du navigateur, et toute version de Safari antérieure à Safari 15.4 ne le prend pas du tout en charge. Les détails complets de prise en charge du navigateur sont disponibles sur puis-je utiliser.
Heureusement, cela ne signifie pas que l'élément de dialogue est inutilisable. L'équipe Google Chrome maintient un polyfill que vous pouvez trouver sur GithubGenericName pour l'élément de dialogue qui le prend en charge même sur les navigateurs où il n'est pas pris en charge de manière native.
Dans sa forme actuelle, l'élément de dialogue peut avoir des problèmes d'accessibilité, il peut donc être plus approprié d'utiliser un composant de dialogue personnalisé comme a11y-boîte de dialogue dans les applications de fabrication.
Comment utiliser l'élément de dialogue
Pour montrer comment utiliser l'élément de dialogue, vous l'utiliserez pour créer une fonctionnalité de site Web commune: un modal de confirmation pour un bouton de suppression.
Tout ce qui est nécessaire pour suivre est un seul fichier HTML.
1. Configurer le fichier HTML
Commencez par créer ledit fichier et nommez-le index.html.
Ensuite, établissez la structure du fichier HTML et fournissez quelques méta-informations de base sur la page, afin qu'elle s'affiche correctement sur tous les appareils.
Saisissez le code suivant dans index.html :
<!DOCTYPE html>
<html lang="fr">
<tête>
<meta charset="UTF-8">
<meta http-equiv="Compatible X-UA" contenu="IE=bord">
<méta nom="fenêtre" contenu="width=device-width, initial-scale=1.0">
<Titre>Démo de dialogue</title>
</head><style></style>
<corps></body>
<scénario></script>
</html>
C'est toute la configuration nécessaire pour ce projet.
2. Rédaction du balisage
Ensuite, écrivez le balisage du bouton de suppression, ainsi que l'élément de dialogue.
Saisissez le code suivant dans la balise body de index.html :
<classe div="bouton-conteneur">
<bouton>
Effacer Objet
</button>
</div>
<dialogue>
<div>
Êtes-vous sûr de vouloir effacercette Objet?
</div>
<div>
<classe de bouton="proche">
Oui
</button>
<classe de bouton="proche">
Non
</button>
</div>
</dialog>
Le code HTML ci-dessus créera :
- Un bouton de suppression.
- L'élément de dialogue.
- Deux boutons dans la boîte de dialogue.
Si index.html est ouvert dans votre navigateur, le seul élément visible à l'écran sera le bouton de suppression. Cela ne signifie pas qu'il y a quelque chose qui ne va pas, l'élément de dialogue nécessite simplement un peu de JavaScript pour devenir visible.
3. Ajout de JavaScript
Maintenant, écrivez le code qui ouvrira la boîte de dialogue lorsqu'un utilisateur clique sur le bouton de suppression, ainsi que le code permettant à la boîte de dialogue de se fermer.
Tapez ce qui suit dans la balise de script de index.html :
constante modal = document.querySelector("dialogue")
document.querySelector("bouton .button-conteneur").addEventListener("Cliquez sur", () => {
modal.showModal();
});
constante closeBtns = document.getElementsByClassName("fermer");
pour (btn de closeBtns) {
btn.addEventListener("Cliquez sur", () => {
modal.proche();
})
}Ce code utilise la méthode querySelector pour obtenir des références aux boutons et à la boîte de dialogue. Il attache ensuite un écouteur d'événement de clic à chaque bouton.
Vous connaissez peut-être des écouteurs d'événements en JavaScript, que vous pouvez utiliser vous-même. L'écouteur d'événement attaché au bouton de suppression appelle la méthode showModal() pour afficher la boîte de dialogue lorsque le bouton est cliqué.
Chaque bouton à l'intérieur du modal est associé à un écouteur d'événement qui utilise la méthode close() pour masquer la boîte de dialogue lorsqu'il est cliqué.
Même s'il n'y a pas de JavaScript qui appelle la méthode close() dans le code, les utilisateurs peuvent également fermer le modal en appuyant sur la touche d'échappement de leur clavier.
Maintenant que ce JavaScript est en place, si un utilisateur clique sur le bouton de suppression, le modal s'ouvrira et cliquer sur le bouton oui ou non fermera le modal.
Voici à quoi devrait ressembler le modal ouvert :
Une chose à noter est que l'élément de dialogue est déjà doté d'un certain style, même s'il n'y a pas de CSS dans index.html. Le modal est déjà centré, il a une bordure, la largeur est limitée au contenu et il a un rembourrage par défaut.
Les utilisateurs ne peuvent pas interagir (cliquer, sélectionner) avec quoi que ce soit en arrière-plan lorsque le modal est ouvert.
L'élément de dialogue peut également s'afficher dans le cadre du flux de la page au lieu d'être modal. Pour l'essayer, modifiez le premier écouteur d'événement dans le JavaScript comme suit :
document.querySelector("bouton .button-conteneur").addEventListener("Cliquez sur", () => { modal.show(); });La seule chose qui a changé dans ce code est que le code appelle la méthode show(), au lieu de la méthode showModal(). Désormais, lorsqu'un utilisateur clique sur le bouton de suppression d'élément, le modal doit s'ouvrir en ligne comme ceci :
4. Ajouter un style
Ensuite, personnalisez l'apparence de la boîte de dialogue et son arrière-plan en écrivant du CSS.
Le CSS réduira la bordure de la boîte de dialogue, limitera sa largeur maximale, puis assombrit l'arrière-plan, et ajoutera un peu de style aux boutons.
Le style de la boîte de dialogue elle-même est simple, mais la pseudo-classe de toile de fond est nécessaire pour ajouter un style qui cible l'arrière-plan de la boîte de dialogue.
Collez le code suivant dans la balise style de index.html :
dialogue:: toile de fond {
fond: noir ;
opacité: 0.5;
}
bouton {
rayon de bordure: 2 px ;
couleur de fond: blanc ;
bordure: 1 pixel noir uni ;
marge: 5px ;
boîte-ombre: 1px 1px 2px gris ;
}
dialogue {
largeur maximale: 90 vw ;
bordure: 1 pixel noir uni ;
}
Lorsque la boîte de dialogue est ouverte, elle devrait maintenant ressembler à ceci :
Et vous avez créé une boîte de dialogue entièrement fonctionnelle.
L'élément de dialogue est un excellent moyen de créer des modaux
En utilisant l'élément de dialogue HTML qui a récemment été pris en charge dans tous les principaux navigateurs, les développeurs Web peuvent désormais créer des éléments entièrement fonctionnels, modaux et boîtes de dialogue facilement personnalisables avec une balise HTML et quelques lignes de JavaScript et sans avoir besoin de faire appel à un tiers la solution.
L'élément de dialogue a un polyfill maintenu par l'équipe Google Chrome, qui permet aux développeurs d'utiliser le dialogue dans les versions de navigateur qui ne le prennent pas en charge.
