いくつかのテクノロジー ニュース ブログを読んでいたところ、「Popover API lands in Baseline」という見出しに遭遇しました。最近フロントエンド開発に取り組んでいる間、HTML での要素の使用に慣れるのに非常に苦労しており、混乱しました。ブログを見ていると、今までこの要素をどのように使用していたのか常に混乱していました。

TL;DR

を選択してください:

• ユーザー フォーカスが必要なモーダル ポップアップ
• アクセシビリティとキーボード操作

ポップオーバーを選択:

• ライト解除による非モーダルポップアップ
• 最小限のコードで簡単に実装

要素

MDN によると Dialog 要素

HTML 要素は、モーダルまたは非モーダルのダイアログ ボックス、または閉じることができるアラート、インスペクター、サブウィンドウなどの他の対話型コンポーネントを表します。

A は通常、Web サイトでユーザーの注意を重要なものに誘導する必要がある場合に使用され、コンテンツの上に表示されます。例: ニュースレターの購読、広告ブロッカーの無効化のリクエスト (強制)、または利用規約の同意。

モーダルとしての

要素

複数の Web サイトで何度も遭遇したことがあるかもしれませんが、これらのポップアップの一部は、背景をぼかしたり背景を無効にしたりして画面全体に描画され、ユーザーが目の前のタスクだけに集中するため、ユーザーは閉じる必要があります。 (許可されている場合のみ) ポップアップを表示するか、ポップアップを消すために必要な情報を入力します。この動作は「モーダルとしての要素」と呼ばれます。これらのモーダル要素は、ページの最上位レイヤーに表示されます。

//To open dialog as a modal.

dialog.showModal();

// To close the dialog.

dialog.close();

要素は、esc キーを使用して閉じることができます。キーボード ユーザーは、このような動作が維持されることを期待しており、ブラウザによって提供されます。複数のモーダル ダイアログが開いている場合、esc キーを使用して最後のダイアログのみが閉じます。

要素を非モーダルとして

Web ページを使用するユーザーの自然な流れを停止したり、他のすべての作業を停止して、表示したいものだけでなくコンテンツ (トースト通知、Cookie の同意、一般的なツールチップなど) に集中したりする必要があるとは限りません。情報。ユーザーが操作できる、または操作できない他のコンテンツの上、ページの最上位レイヤーに表示される必要があります。このような種類のポップアップは、非モーダル ポップアップと呼ばれます。ユーザーはこれらを手動で、または通常は時間をかけて閉じることができ、自然に消えます。これらの非モーダル ダイアログは引き続きページの最上位レイヤーに表示されますが、その優先順位は z-index を使用して制御でき、モーダル要素はこれよりも高い z-index を取得し、これにアクセスできなくなります。

//To open dialog as a modal.

dialog.show();

// To close the dialog.

dialog.close();

コード例

いくつかの問題

非モーダル要素の仕組みや使い方を理解するのに苦労しました。私によると、非モーダル要素の動作に一貫性がなく、次のような状況を処理するには Javascript コードが必要でした。

• ライト解除機能はありません。モデルの外側をクリックしても .
は閉じません。
• Esc キーは無視されず、そのシナリオを処理するには Javascript が必要です。
• 最上位のレイヤーを描画したい場合は、z-index を手動で管理する必要があります。

驚いたことに、ポップオーバー API がこれらの問題などに回答または修正しました....

ポップオーバーAPI

popover は、任意の HTML 属性に追加できる属性です。以下に例を示します。

Toggle the popover
Popover content

ポップオーバーと

要素の主な違い

ポップオーバー要素と