Popover API: HTML を使用してネイティブポップアップを作成 - JavaScript は不要

Susan Sarandon

リリース： 2025-01-18 18:08:43

オリジナル

846 人が閲覧しました

新しいポップオーバー API: JavaScript を使用しない簡単なポップオーバー

ポップオーバー API はポップオーバーの作成を簡素化し、JavaScript ライブラリや手動コーディングの必要性を排除します。主要なブラウザでサポートされているため、実装は非常に簡単です。

ポップオーバー API を理解する

Popover API: Create Native Pop-Ups with HTML—No JavaScript Needed

この新しい標準は、ポップオーバーを表示し、開く、閉じる、およびアクセシビリティに関する考慮事項を自動的に処理するプロセスを合理化します。開発者はこれらの状態を個別に管理する必要がなくなりました。

ポップオーバーの作成

基本的な実装

基本的なポップオーバーを作成する方法は次のとおりです:

HTML 内にポップオーバーをトリガーするボタンを作成します。
ボタンの popover-target 属性を使用し、共有 ID (popover など) を介して要素にリンクします。
同じ ID を使用して、ポップオーバーとして使用する HTML 要素に popover 属性を適用します。

必要なのはこれだけです!ボタンをクリックするとポップオーバーが開き、外側をクリックすると自動的に閉じます（ライトが消える）。この切り替え機能はデフォルトの動作です。

閉じるボタンの追加

ポップオーバー内に閉じるボタンを追加できます。このボタンに適切な popover-target 属性を与え、hide アクションを明示的に定義します。少し CSS を追加すると、見た目が良くなります。

ポップオーバーモード

ポップオーバーのデフォルトは「自動」モードです:

ポップオーバーを開くと、開いている他のポップオーバーが閉じます。
ライト解除が有効になっています。

「手動」モードに切り替えると、他のポップオーバーが自動的に閉じなくなり、ライトの消灯が無効になります。ポップオーバーの開始と終了を明示的に管理する必要があります。

ポップオーバーのスタイリング

背景要素の使用

backdrop 要素は特に便利です。ポップオーバーが開いているときは、ページの残りの部分がオーバーレイされます。

[popover] {
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    max-width: 300px;
}

/* ... other CSS ... */

ログイン後にコピー

これにより、背景のスタイリングが簡単になり、ポップオーバーに注目を集めることができます。

ポップオーバーとモーダル

ポップオーバーはモーダルではないことを理解することが重要です:

ポップオーバーによってページの残りの部分との対話が無効になることはありません。
ポップオーバーが開いている間でも、他の要素をクリックすることができます。

続行する前にユーザーの操作が必要なモーダルの場合は、代わりに dialog.showModal() を使用してください。これにはいくらかの JavaScript が必要ですが、真のモーダル機能が提供されます。

ポップオーバーのスタイルの強化

ダイアログ要素の使用

popover 属性自体は非セマンティックであるため、ポップオーバーに HTML <dialog> 要素を使用できます。

コンテンツを追加して CSS を適用する

さらにコンテンツ (ボタンなど) を追加し、CSS でスタイル設定 (フォントファミリ、パディング、色など) を行うと、ポップオーバーの外観がさらに向上します。この例では、より洗練された外観を実現するために主ボタンのスタイルを設定する方法を示します。

ポップオーバーで JavaScript を使用する

API は JavaScript を使用せずにポップオーバーの作成を簡素化しますが、JavaScript を使用してより高度な制御を行うこともできます (例: showPopover)。

結論

ポップオーバー API は、最小限のコードでエレガントでアクセスしやすいポップオーバーを作成するための合理化されたアプローチを提供します。フィードバックは大歓迎です! このようなコンテンツをもっと知りたい場合は、「いいね」をするかフォローすることを検討してください。

フォローしてください: LinkedIn | 中 | ブルースカイ

以上がPopover API: HTML を使用してネイティブポップアップを作成 - JavaScript は不要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Popover API: HTML を使用してネイティブ ポップアップを作成 - JavaScript は不要