Popver API VS dialogue Modal : Idem mais différent

Je lisais des blogs d'actualités technologiques et je suis tombé sur le titre Popover API lands in Baseline. J'étais confus, lors de ma récente plongée dans le développement front-end, j'ai récemment eu beaucoup de mal à m'habituer à utiliser Elements en HTML. En parcourant le blog, j'étais constamment confus quant à la manière dont j'utilisais l'élément jusqu'à présent.

TL;DR

Choisissez pour :

• Popups modaux nécessitant l'attention de l'utilisateur
• Accessibilité et interaction au clavier

Choisissez le popover pour :

• Popups non modaux avec rejet léger
• Mise en œuvre facile avec un minimum de code

élément

Selon l'élément MDN The Dialog

L'élément HTML représente une boîte de dialogue modale ou non modale ou un autre composant interactif, tel qu'une alerte pouvant être ignorée, un inspecteur ou une sous-fenêtre.

A est généralement utilisé et affiché sur le contenu lorsque le site Web doit attirer l'attention de l'utilisateur sur quelque chose d'important. c'est-à-dire s'abonner à une newsletter, demander (plutôt forcer) de désactiver le bloqueur de publicités ou accepter les termes et conditions.

élément comme modal

Comme vous l'avez peut-être rencontré plusieurs fois sur plusieurs sites Web, certaines de ces fenêtres contextuelles seront dessinées sur tout votre écran tout en rendant l'arrière-plan flou ou en désactivant l'arrière-plan et en concentrant l'utilisateur uniquement sur la tâche à accomplir, l'utilisateur doit soit fermer (uniquement si autorisé) la fenêtre contextuelle ou entrez les informations requises pour qu'elle disparaisse. Ce comportement est appelé « élément en tant que modal ». Ces éléments modaux sont affichés dans la couche supérieure de la page.

//To open dialog as a modal.

dialog.showModal();

// To close the dialog.

dialog.close();

L'élément

lorsqu'il est affiché à l'aide de la méthode showModal() peut être ignoré à l'aide de la touche Échap. Les utilisateurs de clavier s'attendent à un tel comportement qui doit être maintenu et est fourni par le navigateur. Si plusieurs boîtes de dialogue modales sont ouvertes, seule la dernière boîte de dialogue sera fermée à l'aide de la touche Échap.

élément comme non modal

Vous ne souhaiterez peut-être pas toujours arrêter le flux naturel d'utilisation de votre page Web par l'utilisateur, arrêter de faire tout le reste et vous concentrer sur ce que vous souhaitez afficher mais toujours sur votre contenu, comme une notification toast, un consentement aux cookies ou une info-bulle générale. infos. doit apparaître dans la couche supérieure de la page, au-dessus de tout autre contenu avec lequel l'utilisateur peut ou non interagir. Ces types de pop-ups sont appelés pop-ups non modaux. Les utilisateurs peuvent les ignorer manuellement ou généralement avec le temps et disparaîtront d'eux-mêmes. Ces boîtes de dialogue non modales sont toujours affichées dans la couche supérieure de la page mais leur priorité peut être contrôlée à l'aide du z-index et l'élément modal prendra un z-index plus élevé que celui-ci et le rendra inaccessible.

//To open dialog as a modal.

dialog.show();

// To close the dialog.

dialog.close();

Exemple de code

Quelques problèmes

J'ai eu du mal à comprendre le fonctionnement et l'utilisation des éléments non modaux. Selon moi, l'élément non modal se comportait de manière incohérente et nécessitait du code Javascript pour gérer des situations telles que :

• Il n'y a pas de fonctionnalité de renvoi léger. Cliquer en dehors du modèle ne fermera pas le .
• La touche esc ne rejette pas le et nécessite Javascript pour gérer ce scénario.
• vous devez gérer le z-index manuellement si vous souhaitez dessiner la couche supérieure.

À ma grande surprise, l'API popover a répondu ou résolu ces problèmes et plus encore....

API de pop-over

popover sont des attributs qui peuvent être ajoutés à n'importe quel attribut HTML. Voici un exemple.

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

Principale différence entre popover et

élément

La principale différence entre le popover et le

elements est que le popover est toujours non modal. Le L'élément est livré avec un attribut role=dialog, cet attribut de rôle est attaché à divers éléments HTML et se comporte d'une certaine manière. c'est-à-dire que h1 a un rôle de titre et a un rôle d'ancrage/lien. Ce rôle est utilisé pour déterminer et aider les technologies d'assistance telles que les lecteurs d'écran à déterminer les éléments. Cependant, le popover est un attribut d'un élément HTML car aucun rôle par défaut ne lui est attaché. Cela aide le

dans l'exemple ci-dessus, à masquer jusqu'à ce que le bouton soit cliqué.

L'attribut popover peut être utilisé avec un minimum de code et bien qu'il puisse être contrôlé à l'aide de Javascript, il n'est pas requis à tout moment comme le

.

le popover peut avoir 2 caractéristiques :
1.popover=auto : possède une fonctionnalité de rejet léger et ne nécessite aucune interaction JS.
2.popover=manual : nécessite une interaction Javascript, telle que cliquer sur un bouton ou une minuterie pour le fermer explicitement.

le popover est toujours affiché sur la couche supérieure, pas besoin de définir explicitement le z-index.

Exemple de code :

Vous pouvez voir que je peux obtenir le même comportement avec presque aucun code Javascript. Concevoir et gérer divers popovers est beaucoup plus facile.

Quelques considérations de conception

le popover peut avoir : un arrière-plan défini à l'aide de CSS qui peut être utilisé pour flouter ou griser l'arrière-plan du popover, mais cela n'enlève pas la fonctionnalité de rejet de la lumière, et l'utilisateur peut toujours cliquer à l'extérieur si le popover et interagissez avec d’autres éléments de votre page Web. Vous devez être très prudent lorsque vous déterminez quand choisir le popover plutôt que

.

La principale chose à considérer ici est la suivante : le composant affiché est-il la seule chose qui devrait avoir le focus pour le moment ? l'utilisateur peut-il être autorisé à interagir avec autre chose ?

Conclusion

En conclusion, l'élément et l'API popover offrent des options polyvalentes pour créer des popups interactifs dans vos applications Web. En comprenant leurs caractéristiques distinctes et leurs cas d'utilisation, vous pouvez prendre des décisions éclairées pour améliorer l'expérience utilisateur et rationaliser votre processus de développement.

Références

1. Comparaison de l'API Popover et de l'élément
2. Les boîtes de dialogue et les popovers semblent similaires. En quoi sont-ils différents ?
3. L'API Popover arrive dans la ligne de base

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html if for while Cookie auto using Attribute JS default this alert background everything

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn