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();

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