Explication détaillée de l'utilisation de la boîte de dialogue HTML5-Tutoriel H5-php.cn

Explication détaillée de l'utilisation de la boîte de dialogue HTML5

小云云

Libérer： 2018-03-01 09:18:31

original

6304 Les gens l'ont consulté

1. Écrit devant

En parlant de la balise de dialogue, beaucoup de gens ne la connaissent peut-être pas. Après tout, cette balise n'était pas prise en charge par le navigateur Chrome avant le HTML5. La norme 2 a été corrigée. Oui, car aux fins de cette balise, elle peut être clairement comprise en fonction de la sémantique, de la conversation.

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 allons brièvement en examiner quelques-unes. propriétés de la balise de dialogue et scénarios d’utilisation.

2. Utilisez des balises

<dialog open="">      
 <h2>Title</h2>    
 <p>Content</p>
</dialog>

Copier après la connexion

Puisqu'il s'agit d'une balise, elle est en fait la même que notre p couramment utilisé , p et d'autres balises , comme indiqué dans l'exemple de code ci-dessus, prennent en charge d'autres éléments arbitraires en interne.

Ici, vous remarquerez peut-être que l'attribut open dans l'exemple de code ci-dessus, oui, il est utilisé pour contrôler l'affichage et le masquage de cette fenêtre pop-up. Bien sûr, vous pouvez également utiliser CSS à votre guise. . Pour contrôler, cela provoquera des anomalies lors de l'utilisation des fonctions auxiliaires de certains appareils (telles que l'accessibilité, le logiciel de lecture d'écran, etc.), il est donc recommandé d'utiliser les fonctions d'affichage et de masquage standard.

3. Méthodes par défaut prises en charge

Tout d'abord, la balise dialog est un exemple de HTMLDialogElement, hérité de HTMLElement, elle appartient donc à la même catégorie que le p tag. La seule différence entre les balises hiérarchiques est qu'elles ont plus de fonctions par défaut que p. Dans cette section, nous examinerons les méthodes par défaut que dialog peut utiliser.

var dialog = document.getElementById("dialog");
// 假设页面中，有一个id=dialog的dialog标签

// 关闭dialog
dialog.close();

// 以toast的形式显示dialog
dialog.show();

// 以模态框的形式显示dialog
dialog.showModal();

// dialog.close()调用时传入的参数值
dialog.returnVlaue;

// dialog的显示状态
dialog.open;

Copier après la connexion

Vous pouvez d'abord consulter l'exemple, l'utiliser, puis voir quelles sont les 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 caché, 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 à la 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, il n'y a pas de calque de masque derrière, la méthode d'affichage z-index est similaire au paramètre relatif sans paramètre z-index (si avant this, si showModal n'a pas été appelé).

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, la boîte de dialogue suivante couvrira toujours la précédente (quelle que soit la boîte de 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é. affichez l'attribut dialog, les boîtes de dialogue sont toutes à l'avant, ce qui est particulièrement adapté aux boîtes modales. Il n'y aura certainement aucune confusion hiérarchique après l'apparition de la boîte contextuelle.

9 : showModal ne peut être appelé qu'une seule fois. La 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, ou tant que l'attribut open existe. Si vous l'appelez à nouveau, une erreur sera 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 de la boîte de dialogue appelée ultérieurement sera supérieur au niveau de la boîte de dialogue appelée 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. Uniquement lorsque la boîte de dialogue est affichée, la valeur transmise en appelant dialog.close value. est valide.

12 : Si aucune valeur n'est passée dans close, alors la valeur de returnVlaue est vide. Si une valeur est passée à dialog.close("1"), après la prochaine émission, dialog.close() le fera. close , returnVlaue est toujours égal à "1".

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

4. Événements par défaut pris en charge

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 les événements de dialogue :

var dialog = document.getElementById("dialog");
// 假设页面中，有一个id=dialog的dialog标签

// 当调用close方法时
dialog.onclose = function(){};

// 当在pc端按下esc按键时。不过在chrome版本之后，好像不管用了。
dialog.oncancel = function(){};

Copier après la connexion

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

Il y a également plusieurs problèmes, en voici quelques-uns :

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 échap.

3 : S'il y a 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 de quel bouton il s'agit. L'événement d'arrêt utilisé pour déclencher.

5. Autres

Certaines des performances du 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 constaté quelques lacunes, telles que : le style est particulièrement moche. À ce sujet, nous pouvons complètement utiliser CSS pour réinitialiser le style sans affecter la sémantique et autres choses, juste. soyez assuré de refactoriser.

Je veux juste parler de la performance du dialogue, donc je ne ferai pas ça.

6. Résumé

la boîte de dialogue est, après tout, 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 que seul Chrome le prenne en charge, mais il reste très prometteur pour une utilisation future. Même maintenant, vous pouvez le rendre compatible par vous-même. Dans d'autres navigateurs, vous pouvez implémenter vous-même un ensemble de mécanismes de dialogue (il existe peut-être déjà). un plan de mise en œuvre pour cela, donc je n'entrerai pas dans les détails ici).

Recommandations associées :

html