CSSチュートリアル

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

Susan Sarandon

Jan 18, 2025 pm 06:08 PM

新しいポップオーバー 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></dialog> 要素を使用できます。

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

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

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

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

結論

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

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

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

声明

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

CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AM

FlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。

CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AM

CSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。

FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AM

はい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを

軌道力学（またはCSSキーフレームアニメーションの最適化方法）May 09, 2025 am 09:57 AM

独自のコードをリファクタリングするのはどのように見えますか？ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。

CSSアニメーション：それらを作成するのは難しいですか？May 09, 2025 am 12:03 AM

cssanimationsArenotintinlentyhardbutrepracticeanderstanding ofcsspropertiesandtimingfunctions.1）

@KeyFrames CSS：最も使用されているトリックMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversitility andpowerincreatingsmoothcssanimations.keytricksinclude：1）defingsmoothtransitionsbetweenstates、2）AnimatingMultipleProperiessimally、3）3）bendorprefixesforbrows -compativity、4）組み合わせwithjavasfo