Création de fenêtres de dialogue natives HTML5

Publié: 2017-03-29

La fenêtre de dialogue est l'un des éléments les plus couramment utilisés dans la conception de l'interface utilisateur d'un site Web. Il est utilisé à plusieurs fins, y compris l'affichage de notifications, la réalisation d'un formulaire d'abonnement, l'alerte d'erreurs/avertissements et l'attention d'un visiteur sur des informations vitales. Lorsque les fenêtres de dialogue sont conçues de manière efficace et utilisées correctement, elles peuvent faciliter la tâche de l'utilisateur.

Auparavant, la création d'une fenêtre de dialogue nécessitait l'utilisation d'un plugin jQuery comme Pop Easy, jQuery UI Dialog ou Twitter Bootstrap Modal. Mais maintenant, avec l'introduction du nouvel élément <dialog> de HTML5, il est devenu beaucoup plus facile pour les développeurs de créer des boîtes de dialogue contextuelles et des modaux sur une page Web.

Initialement, la <dialog> est entrée dans la spécification HTML5 comme une excellente solution pour marquer les conversations, mais elle a été supprimée de la spécification HTML5 en 2009. Néanmoins, elle est de retour sous une nouvelle forme.

Dans cet article, je vais vous présenter l'élément <dialog> et vous montrer comment vous pouvez en tirer le meilleur parti. Commençons!

Si vous voulez voir l'élément <dialog> en action ou jouer avec le code, regardez la démo en direct ici.

Prise en charge du navigateur pour l'élément <dialog>

Malheureusement, la prise en charge de <dialog> par les navigateurs est limitée pour le moment. L'élément n'est actuellement pris en charge que dans Safari 6.0 et Chrome Canary. Même si Chrome Canary prend entièrement en charge la balise, vous devez activer un indicateur pour l'utiliser. Accédez à chrome://flags et activez l'indicateur "Activer les fonctionnalités expérimentales de la plate-forme Web" .

Activer les fonctionnalités expérimentales de la plate-forme Web activées

Après avoir activé le drapeau, vous devez relancer le navigateur pour que les modifications prennent effet.

L'interface HTMLDialogElement

L'interface HTMLDialogElement , qui est incluse dans les spécifications HTML de l'élément <dialog> , possède de nombreuses propriétés et méthodes que vous pouvez utiliser pour faire apparaître et disparaître vos boîtes de dialogue. Ils sont les suivants :

Méthodes :

L'interface HTMLDialogElement dispose de trois méthodes pour ouvrir et fermer les boîtes de dialogue.

  • show() : Cette méthode est utilisée pour afficher une boîte de dialogue. Les utilisateurs peuvent toujours accéder à d'autres contenus du document HTML tant qu'une boîte de dialogue est ouverte.
  • showModal() : utilisé pour lancer une "boîte de dialogue modale" , qui empêche un utilisateur d'accéder à autre chose qu'à la fenêtre de dialogue sur une page Web.
  • close() : utilisé pour fermer une boîte de dialogue. Vous pouvez passer returnValue comme paramètre facultatif qui mettra à jour la propriété returnValue .

Propriétés:

Deux propriétés sont incluses dans l'interface HTMLDialogElement .

  • returnValue : Récupère le paramètre qui a été éventuellement passé à close() .
  • open : Cette propriété est une valeur booléenne. Si true , la boîte de dialogue sera visible pour l'utilisateur. Sinon, il sera masqué.

Événements:

Lorsqu'une boîte de dialogue est fermée, un événement de close est déclenché.

 dialog.addEventListener('fermer', fonction() {
Un autre code ira ici…
});

Outre ces méthodes et propriétés clés, l'élément <dialog> prend également en charge :

  • form[method="dialog"] : Utilisé pour intégrer un formulaire avec un <dialog> . Valide uniquement à l'intérieur d'une boîte de dialogue.
  • autofocus attribute : utilisé pour donner le focus à un contrôle de formulaire dans une boîte de dialogue.
  • cancel event : un événement d' cancel est déclenché lorsqu'une boîte de dialogue modale est fermée via "Esc"

Maintenant, après avoir compris les bases de l'élément <dialog> , passons à la pratique avec quelques exemples.

Création d'un dialogue

Tout d'abord, je vais vous montrer comment créer une boîte de dialogue simple. Le code ci-dessous définit un simple élément <dialog> avec du contenu, un bouton de fermeture pour masquer la boîte de dialogue et un bouton d'affichage pour lancer la boîte de dialogue.



Bienvenue sur Jonction réactive !


Rendez votre site existant réactif

Lorsque vous testez le code ci-dessus dans votre navigateur, vous ne voyez rien d'autre que le bouton "Afficher la boîte de dialogue" sans aucune fonctionnalité, comme indiqué dans la capture d'écran ci-dessous :

Afficher le bouton de dialogue sans aucune fonctionnalité

Pour ouvrir et fermer l'élément <dialog> , vous devez utiliser JavaScript .show() et .close() .

 (une fonction() {  
 	var dialogue = document.getElementById('Dialogue');
document.getElementById('showDialog').onclick = fonction() {  
dialogue.show();  
} ;  
document.getElementById('closeDialog').onclick = fonction() {  
dialogue.close();  
} ;
})();

Maintenant, si vous cliquez sur le bouton "Afficher la boîte de dialogue" , vous pouvez voir la fenêtre de dialogue dans le navigateur. Cliquez sur "Quitter" pour fermer la fenêtre de dialogue. Voici la capture d'écran :

Cliquer sur Quitter fermera la fenêtre de dialogue

Ajouter du style au dialogue

Vous pouvez ajouter des styles CSS à votre boîte de dialogue comme vous le feriez pour n'importe quel autre élément. Par défaut, la fenêtre de dialogue sera affichée horizontalement centrée tout en superposant d'autres éléments. Si vous êtes à l'aise avec la position et l'apparence par défaut, aucun autre CSS n'est requis. Sinon, vous pouvez ajouter votre propre CSS pour adapter et concevoir la fenêtre de dialogue à votre goût, comme je l'ai fait ci-dessous :

 dialogue {
haut : 28 % ;
largeur : 400 pixels ;  
bordure : 1px solide rgba(0, 0, 0, 0.3) ;
rayon de bordure : 15 px ;
boîte-ombre : 0 3px 7px rgba(0, 0, 0, 0.3);
bordure supérieure : 5px solide #eb9816 ;
}
bouton{
affichage : bloc en ligne ;
rayon de bordure : 3 px ;
bordure : aucune ;
taille de police : 0,9 rem ;
rembourrage : 0,4 rem 0,8 em ;
arrière-plan : #eb9816 ;
bordure inférieure : 1px solide #f1b75c ;
Couleur blanche;
font-weight : gras ;
marge : 0 0,25 rem ;
aligner le texte : centrer ;
}
bouton : survoler, bouton : focus {
opacité : 0,92 ;
curseur : pointeur ;
}

Ajouter du style au dialogue

Création d'un dialogue modal

Si vous souhaitez empêcher vos utilisateurs d'accéder au contenu de votre code HTML, vous pouvez utiliser des fenêtres de dialogue modales. Comme la fenêtre de dialogue modale est grisée, toutes les autres choses autres que la boîte de dialogue seront affichées, les utilisateurs ne pourront pas sélectionner le texte grisé ou cliquer pour sélectionner des boutons lorsque la fenêtre de dialogue est ouverte.

La création de modaux est similaire à la création de boîtes de dialogue, à la seule différence d'utiliser .showModal() au lieu de .show() . Il n'est pas nécessaire d'apporter des modifications au code HTML.

(une fonction() {  
 	var dialogue = document.getElementById('Dialogue');
document.getElementById('showDialog').onclick = fonction() {  
dialogue. showModal(); 
} ;  
document.getElementById('closeDialog').onclick = fonction() {  
dialogue.close();  
} ;
})();

Alors que les boîtes de dialogue par défaut sont affichées centrées horizontalement, les boîtes de dialogue modales sont affichées verticalement et horizontalement centrées dans la fenêtre. De plus, vous pouvez fermer une boîte de dialogue modale en appuyant sur la touche "Échap" .

Création d'un dialogue modal

Ajout de la couleur d'arrière-plan de la boîte de dialogue modale

L'élément <dialog> comporte un pseudo-élément appelé "::backdrop" , qui ne fonctionne qu'avec les dialogues modaux. À l'aide de cet élément, vous pouvez assombrir la page principale afin de communiquer aux utilisateurs qu'elle n'est pas accessible. Vous pouvez positionner et styliser un arrière-plan en tirant parti des propriétés CSS standard :

 boîte de dialogue :: toile de fond{
position : fixe ;
haut : 0 ;
gauche : 0 ;
droite : 0 ;
bas : 0 ;
couleur d'arrière-plan : rgba(0, 0, 0, 0,7) ;
}

Ajout de la couleur d'arrière-plan de la boîte de dialogue modale

Implémenter <dialog> avec un formulaire

Un formulaire peut être intégré à un élément <dialog> en utilisant form method="dialog" . Lors de la soumission du formulaire, la fenêtre de dialogue se ferme et renvoie la valeur du bouton de soumission via la propriété dialog.returnValue .

Voici le code HTML de la boîte de dialogue du formulaire :





Êtes-vous d'accord avec les conditions d'utilisation ?

Utilisez le code JavaScript suivant pour la boîte de dialogue du formulaire.

var formDialog = document.getElementById('formDialog');
document.getElementById('showformDialog').onclick = fonction() {  
formDialog.showModal();  
} ;
document.getElementById('soumettre').onclick = fonction() {
formDialog.close(valeur);
} ;
document.getElementById('formDialog').addEventListener('fermer', fonction() {
alert(formDialog.returnValue);
});

Implémenter <dialog> avec un formulaire

Note : Pour une meilleure compréhension, j'utilise formDialog à la place de Dialog dans ma démo.

Si vous voulez voir l'élément <dialog> en action ou jouer avec le code, regardez la démo en direct ici.

Conclusion

Avec la réincarnation de l'élément <dialog> , il est devenu beaucoup plus facile pour les développeurs de créer des boîtes de dialogue sans utiliser de plugin jQuery. Même si Chrome Canary et Safari 6.0 interprètent correctement l'élément <dialog> , un polyfill est disponible pour s'assurer que les autres navigateurs prendront en charge l'élément.

Si vous souhaitez en savoir plus sur d'autres propriétés HTML5, vous pouvez consulter Se familiariser avec l'API de fichier HTML5, ou vous pouvez en savoir plus sur l'attribut de menu contextuel HTML5.