HTML彈出屬性將元素變成頂層組件，可以使用按鈕或JavaScript打開并關閉它們。大多數(shù)彈出案都支持輕勢行為，這意味著當用戶在外面單擊或敲擊時它們關閉。目前，默認情況下，HTML彈出案不包括自動關閉功能，但實現(xiàn)很容易。自動關閉的彈出窗口在橫幅通知等接口中很方便 - 例如電話上的消息警報。

一個圖片演示，值得一千個字，對嗎？嘗試在下面的示例中單擊“添加到我的書簽”按鈕。它將顯示一條通知，該通知會在一定時間后自動消失。

從彈出器開始

使用HTML彈出屬性非常簡單。只需將其應用于DIV，定義了您想要的彈出式類型，并且您都設置了。

 <code>Bookmarked!</code>

手動彈出聲意味著不能通過單擊它來忽略它。因此，我們必須通過按鈕或JavaScript手動控制其可見性。為此，讓我們使用語義HTML按鈕。

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

所需的最后兩個屬性是popoverTarget和popoverTargetAction。 popoverTarget將按鈕鏈接到彈出元件，而PopoverTargetAction可確保單擊按鈕顯示彈出聲。

用CSS過渡掩蓋彈出窗口

到目前為止，我們有一個單擊按鈕時出現(xiàn)的彈出窗口，但是還沒有辦法將其駁回。該按鈕僅觸發(fā)彈出窗口顯示 - 它不會隱藏或切換它（因為該操作未明確定義）。我們現(xiàn)在的目標是在按下按鈕時出現(xiàn)彈出窗口，然后在一段時間后自動消失。

盡管HTML彈出案不能通過CSS關閉，但它肯定可以在視覺上隱藏。在此隱藏過程中添加動畫可以增強視覺體驗。在我們的情況下，我們將通過CSS刪除其高度來隱藏彈出案。稍后，您將了解為什么我們選擇身高以及其他方法也可能起作用。

我們可以使用屬性選擇器來定位彈出案：

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

當按鈕激活彈出窗口時，高度始于 @啟動式塊（1LH）中定義的值。在過渡 - 延遲（.6s）之后，高度在.3s上從1LH到0的動畫，有效地隱藏了彈出聲。

請記住，這僅在視覺上隱藏彈出窗口，而不能正確關閉。這使我們陷入了下一個挑戰(zhàn)，這需要JavaScript才能完全管理。

使用JavaScript關閉彈出窗口

我們首先定義一個變量來引用彈出案：

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

接下來，我們設置了一個resizeObserver，以跟蹤彈出窗口大小的變化：

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

一旦單擊打開彈出聲的按鈕，就會觸發(fā)此觀察者：

 <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過渡完成并且彈出窗口的高度達到零后，觀察者使用hidepopover（）關閉彈出窗口，并通過unobserve（）停止觀察。

在此示例中，我們使用高度和調整器來實現(xiàn)通知的自動關閉。但是，請根據您的喜好隨意嘗試其他CSS屬性和JavaScript觀察者。了解ResizeObserver和MutationObserver可能會為您的特定用例揭示更多選擇。

提供HTML后備

如果JavaScript在瀏覽器中被禁用，并且Popover類型允許使用光線，則可以作為后備。您可以通過覆蓋隱藏的樣式來保持彈出窗口可見。這使用戶可以通過在彈出區(qū)域之外單擊或敲擊來忽略它。

如果僅在禁用JavaScript時僅支持Light-Dismiss，請將其放入手動彈出之前的元素中。該方法反映了我們之前所做的事情 - 只需覆蓋所需的CSS規(guī)則即可。

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

什么時候應該應用此技術？

另一種方法將涉及在JavaScript中使用SetteMeout（）在單擊按鈕后延遲關閉彈出窗口，并應用類以觸發(fā)過渡效果。這消除了對觀察者的需求。

但是，此處討論的方法使延遲可以在CSS中直接處理，這要歸功于 @啟動風格和Transition-Delay，而無需其他類。當您純粹通過CSS管理延遲時，這使其成為理想的選擇。 JavaScript只是對CSS中定義的時序而不是控制它。

以上是使用HTML彈出案創(chuàng)建自動關閉通知的詳細內容。更多信息請關注PHP中文網其他相關文章！