HTMLポップオーバー屬性は、要素をトップレイヤーコンポーネントに変換し、ボタンまたはJavaScriptを使用して開いて閉じることができます。ほとんどのポップオーバーは、Light-dismissの動(dòng)作をサポートしています。つまり、ユーザーがクリックしたり、外側(cè)にタップしたりすると閉じます?，F(xiàn)時(shí)點(diǎn)では、HTML Popoverにはデフォルトでは自動(dòng)クロース機(jī)能は含まれていませんが、実裝するのは簡(jiǎn)単です。自動(dòng)クロージングポップアップは、バナー通知などのインターフェイスで便利です。たとえば、電話でのメッセージアラートなどです。

a寫真デモ、千語の価値がありますよね？以下の例の[ブックマークに追加]ボタンをクリックしてみてください。特定の時(shí)間の後に自動(dòng)的に消える通知が表示されます。

ポップオーバーから始めます

HTMLポップオーバー屬性を使用することは驚くほど簡(jiǎn)単です。 Divに適用し、必要なポップオーバーのタイプを定義するだけで、すべてが設(shè)定されています。

 <code>Bookmarked!</code>

手動(dòng)のポップオーバーは、外側(cè)をクリックして卻下できないことを意味します。したがって、ボタンまたはJavaScriptを介して、その可視性を手動(dòng)で制御する必要があります。この目的のために、セマンティックHTMLボタンを使用してみましょう。

 <code>Add to my bookmarks Bookmarked!</code>

必要な最後の2つの屬性は、PopoverTargetとPopoverTargetActionです。 PopOverTargetはボタンをポップオーバー要素にリンクしますが、ポップオーバータルゲットはボタンをクリックするとポップオーバーが表示されます。

CSS遷移でポップオーバーを隠す

これまでのところ、ボタンがクリックされたときに表示されるポップオーバーがありますが、まだ卻下する方法はありません。ボタンは、表示するためにポップオーバーをトリガーするだけです - それを非表示または切り替えません（そのアクションは明示的に定義されていないため）。私たちの目標(biāo)は、ボタンが押されたときにポップオーバーを表示し、しばらくして自動(dòng)的に消えることです。

HTMLポップオーバーはCSSを介して閉じることはできませんが、確かに視覚的に隠すことができます。この隠れプロセスにアニメーションを追加すると、視覚體験が向上します。私たちの場(chǎng)合、CSSを介して高さを削除してポップオーバーを隠します。後で、なぜ高さを選んだのか、そして他の方法もどのように機(jī)能するかがわかります。

屬性セレクターを使用して、ポップオーバーをターゲットにできます。

 <code>[popover] { height: 0; transition: height cubic-bezier(0.6, -0.28, 0.735, 0.045) .3s .6s; @starting-style { height: 1lh; } }</code>

ボタンがポップオーバーをアクティブにすると、高さは @starting-styleブロック（1LH）で定義された値から始まります。遷移領(lǐng)域（.6S）の後、高さは.3Sで1LHから0にアニメーション化され、ポップオーバーを効果的に隠します。

これは単にポップオーバーを視覚的に隠すだけでなく、適切に閉じないことに注意してください。これにより、次の課題になります。これにより、JavaScriptが完全に管理する必要があります。

JavaScriptを使用してポップオーバーを閉じます

まず、変數(shù)を定義してポップオーバーを參照することから始めます。

 <code>const POPOVER = document.querySelector('[popover]');</code>

次に、Popoverのサイズの変更を追跡するためにResizeObserverを設(shè)定します。

 <code>const POPOVER = document.querySelector('[popover]'); const OBSERVER = new ResizeObserver((entries) => { if(entries[0].contentBoxSize[0].blockSize == 0) OBSERVER.unobserve((POPOVER.hidePopover(), POPOVER)); });</code>

このオブザーバーは、ポップオーバーを開くボタンがクリックされるとトリガーされます。

 <code>const POPOVER = document.querySelector('[popover]'); const OBSERVER = new ResizeObserver((entries) => { if(entries[0].contentBoxSize[0].blockSize == 0) OBSERVER.unobserve((POPOVER.hidePopover(), POPOVER)); }); document.querySelector('button').onclick = () => OBSERVER.observe(POPOVER);</code>

CSSの遷移が完了し、ポップオーバーの高さがゼロに達(dá)すると、オブザーバーはhidepopover（）を使用してポップオーバーを閉じ、unobserve（）を介して観測(cè)を停止します。

この例では、高さとResizeObserverを使用して、通知の自動(dòng)閉鎖を?qū)g現(xiàn)しました。ただし、好みに基づいて、他のCSSプロパティやJavaScriptオブザーバーを自由に試してみてください。 ResizeObserverとMutationObserverについて學(xué)習(xí)すると、特定のユースケースのオプションが増える場(chǎng)合があります。

HTMLフォールバックを提供します

JavaScriptがブラウザで無効になり、ポップオーバータイプがLight-dismissalを許可すると、フォールバックとして機(jī)能します。それを隠すスタイルをオーバーライドすることにより、ポップオーバーを見えるようにすることができます。これにより、ユーザーはポップオーバーエリアの外側(cè)をクリックまたはタップすることで卻下できます。

JavaScriptが無効になっているときにポップオーバーがLight-Dismissのみをサポートする必要がある場(chǎng)合は、マニュアルポップオーバーの前に要素の中に配置します。このアプローチは、以前に行ったことを反映しています。必要なCSSルールをオーバーライドするだけです。

 <code>Bookmarked! Bookmarked! [popover] { transition: none; height: 1lh; }</code>

この手法はいつ適用する必要がありますか？

別の方法では、JavaScriptでSettimeout（）を使用してボタンクリック後にポップオーバーの閉鎖を遅らせ、クラスを適用して遷移効果をトリガーすることが含まれます。これにより、オブザーバーの必要性がなくなります。

ただし、ここで説明する方法では、追加のクラスを必要とせずに、 @Starting-StyleおよびTransition-Delayのおかげで、遅延をCSS內(nèi)で直接処理できます。これにより、CSSを介して純粋に遅延を管理することを好む場(chǎng)合に理想的になります。 JavaScriptは、CSSを制御するのではなく、CSSで定義されたタイミングに単純に反応します。

以上がHTMLポップオーバーを使用して自動(dòng)閉鎖通知を作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。