Introduction détaillée à la boîte de dialogue HTML5.2

Le 24 décembre 2017, la norme HTML5.2 a été consolidée, ce qui signifie également que le terminal mobile est entré dans la phase de planification HTML5.3. Bien que HTML5.2 ait été solidifié, certaines nouvelles spécifications internes n'ont pas encore été prises en charge par les navigateurs mobiles. améliorer, nous examinons ici une balise couramment utilisée qui est nouvellement incorporée dans la norme, il s'agit de la balise de dialogue.

En parlant de la balise de dialogue, beaucoup de gens ne la connaissent peut-être pas. Après tout, cette balise n'était prise en charge que par le navigateur Chrome jusqu'à ce que la norme HTML5.2 soit corrigée. Quant à l'utilisation de cette balise, elle peut être clairement comprise en fonction. la sémantique.

Ce à quoi nous pouvons penser ici, ce sont des fenêtres pop-up d'alerte, de confirmation et autres. Oui, elles sont de la même famille, ce sont toutes des boîtes pop-up. Ensuite, nous examinerons brièvement certaines propriétés et scénarios d'utilisation de la. balise de dialogue.

 <dialog open=> <h2>Titre</h2> <p>Contenu</p></dialog>

Puisqu'il s'agit d'une balise, elle est en fait la même que nos balises div, p et autres couramment utilisées. Comme le montre l'exemple de code ci-dessus, elle prend en charge tous les autres éléments en interne.

Ici, vous remarquerez peut-être que l'attribut open dans l'exemple de code ci-dessus, oui, est utilisé pour contrôler l'affichage et le masquage de cette fenêtre contextuelle. Bien sûr, vous pouvez également utiliser CSS pour la contrôler arbitrairement, comme ça. les fonctions auxiliaires de l'appareil (telles que l'accès sans obstacle, le logiciel de lecture d'écran, etc.) peuvent provoquer des anomalies, il est donc recommandé d'utiliser les fonctions d'affichage et de masquage de la norme.

Tout d'abord, la balise dialog est un exemple de HTMLDialogElement et hérite de HTMLElement. C'est donc une balise du même niveau que la balise div. La seule différence est qu'elle a plus de fonctions par défaut que div. Jetons un coup d'œil aux méthodes par défaut que la boîte de dialogue nous propose d'utiliser.

 var dialog = document.getElementById(dialog);// Supposons qu'il existe une balise de dialogue avec id=dialog dans la page // Fermez dialogdialog.close(); // Affiche la boîte de dialogue sous la forme de toastdialog.show(); / Dans le modèle Affichage dialogdialog.showModal();// La valeur du paramètre transmise lorsque dialog.close() est appelé dialog.returnVlaue;// L'état d'affichage de la boîte de dialogue dialog.open ;

Vous pouvez d'abord consulter l'exemple, l'utiliser, puis voir ses fonctionnalités, puis revenir pour comparer. Le résumé suivant :

1 : La méthode close peut être appelée plusieurs fois, même à l’état masqué, et peut être appelée à nouveau.

2 : close peut passer une variable, qui doit être une chaîne et exprimée en returnVlaue.

3 : La méthode show peut également être appelée plusieurs fois, même à l’état caché, sans aucun problème.

4 : La méthode show ne changera pas la position du toast. La boîte contextuelle est toujours à sa position d'origine après l'appel de la méthode show.

5 : méthode show, la position d'affichage est immédiatement derrière l'élément précédent, centrée, sans calque de masque derrière lui. Le mode d'affichage de z-index est similaire à celui de relatif sans définir z-index (si showModal n'a pas été appelé auparavant. ) ).

6 : Si showModal a été appelé, après la méthode show, l'élément est affiché à la position affichée par showModal et ne changera pas (même si la hauteur du contenu change beaucoup).

7 : S'il y a deux éléments de dialogue, tous deux appellent la méthode show dans la structure HTML, cette dernière boîte de dialogue couvrira toujours la précédente (quel que soit le dialogue qui appelle la méthode show en premier).

8 : Il y aura un calque de masque derrière l'affichage de showModal. Le niveau d'affichage est au niveau de la vue Web du navigateur. Comment le comprendre Vous pouvez définir un élément avec un niveau très élevé. Après avoir utilisé showModal pour afficher l'attribut de dialogue. La boîte de dialogue sera à la fin. Le point précédent est particulièrement adapté aux boîtes modales. Il n'y aura certainement pas de confusion hiérarchique après l'apparition de la boîte contextuelle.

9 : showModal ne peut être appelé qu'une seule fois ici signifie que si la boîte de dialogue est dans l'état d'affichage, une erreur sera signalée lorsque showModal est à nouveau appelé, et elle ne peut pas être exécutée directement. l'attribut open existe, l'appeler à nouveau le fera. Une erreur est signalée, il est donc préférable d'utiliser l'attribut open par défaut pour afficher et masquer la boîte de dialogue.

10 : S'il y a deux éléments de dialogue sur la page et que tous deux appellent la méthode showModal, quelle que soit leur structure en HTML, le niveau du dialogue appelé ultérieurement sera supérieur au niveau du dialogue appelé précédemment.

11 : La valeur de dialog.returnVlaue est la valeur transmise lors de l'appel de dialog.close(string). Elle ne prend en charge que les chaînes. La valeur transmise lors de l'appel de dialog.close n'est valide que lorsque la boîte de dialogue est affichée.

12 : Si aucune valeur n'est passée dans close, la valeur de returnVlaue est vide. Si la valeur dialog.close(1) est passée une fois, après le prochain show, dialog.close() est fermé et returnVlaue est toujours égal à 1. .

13 : La valeur de retour de open est : vrai/faux.

Un autre avantage du dialogue est qu'en plus des événements de base tels que le clic, il prend en charge deux événements spéciaux supplémentaires pour le dialogue :

 var dialog = document.getElementById(dialog); // Supposons qu'il existe une balise de dialogue avec id=dialog dans la page // Lorsque la méthode de fermeture est appelée dialog.onclose = function(){}; du côté du PC En appuyant sur la touche. Mais après la version Chrome, cela ne semble plus fonctionner. dialogue.oncancel = function(){};

Regardons maintenant un exemple : exemple d'affichage d'un événement de dialogue.

Il y a aussi plusieurs questions, listons-les ici :

1 : Ce n'est qu'en appelant dialog.close() pour masquer la boîte de dialogue que l'événement onclose peut être déclenché.

2 : Une fois l'événement d'annulation déclenché, l'événement de fermeture continuera définitivement à être déclenché. Après la version chrome64, l'annulation n'est pas déclenchée par la touche ESC.

3 : S'il existe plusieurs boutons pour fermer la boîte de dialogue, transmettez une valeur différente à chaque fois que close est appelé. Dans le rappel de l'événement close, utilisez la valeur de returnVlaue pour déterminer quel bouton est utilisé pour déclencher l'événement close.

Certaines des performances de la boîte de dialogue ont été expliquées précédemment. Elles peuvent être incomplètes ou inexactes, ou de nouvelles fonctionnalités peuvent apparaître au fil du temps. Tout ajout est le bienvenu.

En regardant les exemples précédents, nous avons également vu quelques défauts, tels que : le style est particulièrement laid. A ce propos, on peut complètement utiliser CSS pour réinitialiser le style sans affecter la sémantique ou quoi que ce soit d'autre. .

Je veux juste parler ici des performances du dialogue, donc je ne le ferai pas.

Après tout, dialog est une balise sémantique pour les boîtes de dialogue contextuelles et présente des avantages uniques (tels que la hauteur du niveau d'affichage Web). Bien qu'elle ne soit actuellement prise en charge que par Chrome, elle reste très prometteuse pour une utilisation future. il est même compatible maintenant. Maintenant, dans d'autres navigateurs, implémentez vous-même un ensemble de mécanismes de dialogue (il existe peut-être déjà un plan d'implémentation pour cela, donc je ne le chercherai pas ici).

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.