Popver API VS ダイアログ モーダル: 同じ同じだが異なる

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

.

ポップオーバーには 2 つの特性があります:
1.popover=auto: ライト解除の機能があり、JS インタラクションは必要ありません。
2.popover=manual: 明示的に閉じるには、ボタンやタイマーをクリックするなどの Javascript インタラクションが必要です。

ポップオーバーは常に最上位レイヤーに表示され、z-index を明示的に設定する必要はありません。

コード例:

JavaScript コードをほとんど使わずに同じ動作を実現できることがわかります。さまざまなポップオーバーのデザインと管理がはるかに簡単になります。

設計上の考慮事項

ポップオーバーには、CSS を使用して背景を設定できます。これは、ポップオーバーの背景をぼかしたりグレーアウトしたりするために使用できますが、ポップオーバーのライト解除機能を奪うことはなく、ポップオーバーの場合でもユーザーは外側をクリックできます。を起動して、Web ページの他の要素と対話します。 ではなくポップオーバーをいつ選択するかを決定するときは、非常に注意する必要があります。

ここで考慮すべき主な点は、現時点でフォーカスが必要なのは、表示されているコンポーネントだけかどうかということです。ユーザーは他のものと対話することを許可できますか?

結論

結論として、この要素とポップオーバー API は、Web アプリケーションでインタラクティブなポップアップを作成するための多彩なオプションを提供します。それらの独特の特性とユースケースを理解することで、情報に基づいた意思決定を行い、ユーザー エクスペリエンスを向上させ、開発プロセスを合理化できます。

参考文献

1. Popover API と要素の比較
2. ダイアログとポップオーバーは似ているように見えます。どう違うのですか?
3. Popover API がベースラインに到達

以上がPopver API VS ダイアログ モーダル: 同じ同じだが異なるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。