Une brève discussion sur l'essai de l'élément de dialogue en HTML5

Les boîtes de dialogue (également appelées boîtes modales et couches flottantes) constituent une partie importante de l'interaction utilisateur dans les projets Web. Les plus courantes que nous utilisons sont alert() et confirm() dans js. Cependant, cette boîte de dialogue n'est pas belle et ne peut pas le faire. être personnalisé, donc pendant le processus de développement, nous construisons généralement des roues en fonction de nos propres besoins ou utilisons des roues tierces.

Formes courantes de boîtes pop-up :

Position : coin supérieur gauche de l'écran, coin supérieur droit, coin inférieur gauche, coin inférieur droit, centre vertical, etc.

Taille : largeur fixe et hauteur fixe, largeur fixe et hauteur fixe, largeur variable et hauteur fixe, etc.

Le formulaire de dialogue en cours de développement est un cas de combinaison aléatoire de position et de taille.

Cependant, il existe une situation (centrage vertical avec largeur et hauteur variables) qui n'est pas facile à mettre en œuvre (vous pouvez utiliser display:table ou translation ou flex de CSS3 pour y parvenir. Pour plus de détails, veuillez vous référer à la disposition de centrage horizontal et vertical). .

La boîte de dialogue ci-dessus contient un conteneur pour le contenu, et il y a également un calque de masque (masque) sous la boîte de dialogue. Le calque de masque est un calque de séparation entre la boîte de dialogue et le corps de la page formé après que l'utilisateur a déclenché la boîte de dialogue. .Son existence Il peut donner aux utilisateurs un effet de différence visuelle plus évident, et en même temps éviter d'autres opérations principales de page inutiles après que les utilisateurs ont déclenché la boîte de dialogue, produisant ainsi une meilleure expérience utilisateur.

Bien qu’il existe de nombreuses roues de dialogue parmi lesquelles choisir, nous sommes confrontés à divers problèmes.

• Quelle boîte de dialogue choisir (un casse-tête pour les personnes atteintes du syndrome du choix)
• Ergonomie (que l'API soit simple ou non, qu'elle s'appuie sur d'autres bibliothèques tierces)
• Évolutivité
• Prise en charge de la compatibilité du navigateur

Alors, existe-t-il un moyen simple de créer une boîte de dialogue ? Bien sûr, nous pouvons utiliser l'élément de dialogue HTML5.

HTML5 (boîte de dialogue)

 <dialog open> <h2>Bonjour tout le monde.</h2></dialog>

C'est très simple. Nous pouvons utiliser le code ci-dessus pour créer une boîte de dialogue qui apparaît avec le contenu 'Bonjour tout le monde'.

Il est également facile de contrôler l'affichage/masquage de la boîte de dialogue. Ajoutez l'attribut open pour l'afficher, et supprimez-le pour la masquer. Bien sûr, nous pouvons également contrôler l'affichage et le masquage de la boîte de dialogue via l'interface DOM (show(), close())

Pour le calque de masque sous la boîte de dialogue, nous pouvons utiliser le pseudo-élément ::backgrop, et pour l'activer, nous devons utiliser l'API DOM showModal(). La caractéristique de ::backgrop est que sa position est sous la boîte de dialogue. , dans n'importe quel z -index ci-dessus.

L'utilisation de showModal() peut non seulement afficher le calque de masque, mais également le conteneur de dialogue, donc lorsque vous utilisez ::backdrop, vous pouvez utiliser showModal() au lieu de l'API show() si vous appuyez sur la touche ESC du clavier, la La couche contextuelle sera fermée. Bien sûr, vous pouvez utiliser l'API DOM close().

Nous pouvons définir le calque ::backdrop comme un calque semi-transparent, le code est le suivant :

 dialogue :: toile de fond { couleur d'arrière-plan : rgba (0, 0, 0, 0,75);}

En plus de nos couches contextuelles communes contenant des informations d'invite, il existe également une couche contextuelle avec un formulaire plus couramment utilisé.

Pouvons-nous utiliser l'élément de dialogue HTML5 combiné avec l'élément de formulaire pour créer ces calques contextuels ?

Réponse : Oui

Comment pouvons-nous combiner étroitement l’élément de formulaire et l’élément de dialogue ?

Réponse : Il suffit d'ajouter l'attribut method=dialog à l'élément de dialogue, afin que la valeur de l'attribut de l'élément bouton puisse être transmise à l'élément de dialogue.

 <dialog> <form method=dialog> <p>Confirmer ou Annuler</p> <button type=submit value=yes>Confirmer</button> <button type=submit value=no>Annuler</button> </form ></dialog><script> var dialog = document.querySelector('dialog') dialog.showModal() dialog.addEventListener('close', function(event) { console.log(dialog.returnValue) })</script>

démo

Bien qu'il s'agisse d'un HTML5 relativement facile à utiliser, il existe toujours des problèmes de compatibilité. Chrome et Opera le prennent mieux en charge. Il s'agit d'une fonctionnalité expérimentale dans Firefox, mais elle n'est pas prise en charge par IE, Edge et Safari. par iOS et est également pris en charge par Android n'est pas assez bon et n'est pris en charge que par Android 6 et versions ultérieures. Pour plus de détails, veuillez vous référer à caniuse

Alors, les anciennes versions des navigateurs peuvent-elles prendre en charge la boîte de dialogue HTML5 ? Tout d'abord, nous nous demandons s'il existe un polyfill prenant en charge le dialogue, tout comme babel-polyfill qui prend en charge les nouvelles fonctionnalités d'es6. Il existe en effet un tel projet open source a11y-dialog, qui fournit différentes versions de vue et. réagir respectivement.

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.