poppin＆＃039;在

嘿！長時間看不到！ 只是想進來打個招呼。 ？

說到“彈出”，我一直在嘗試新的Popover API。 我們首先在2018年提到它，但是現代瀏覽器中的全部支持僅是最近的（2024年4月）。

最初，計劃了專用的屬性取代。這是有道理的，因為任何元素現在都可以用作彈出窗口 - 只需添加屬性。 <popover></popover>popover ```html

<code>
Here's an interesting observation: a simple element like this:

```html
<div>?</div></code>

...正常顯示。 但是，添加popover屬性將其隱藏起來！ 最初，這使我感到困惑，但DevTools確認這是預期的行為。

可以通過IDS區分多個彈出聲：

需要一個“觸發器”來激活彈出聲。 另一個屬性將任何按鈕（或類似按鈕的元素）轉換為此觸發器：>

<div popover="id1"></div>
<div popover="id2"></div>

>單擊按鈕可切換彈出窗口的可見性。 CSS處理可見性邏輯，使我們可以專注於點擊事件。 例如，當彈出窗口打開時，較厚的黑色邊框是默認樣式。

DevTools揭示了其他有趣的細節：即使使用

<button>Say Hello!</button>
<div popover="">?</div>

，彈出窗口的寬度和高度也像在線元素一樣。它的大小適用於內容，並以中心為中心，所有這些都沒有自定義CSS！

>

>刪除默認邊框不如

那麼簡單。 display: blockpseudo-class樣式元素

border: 0;在打開時，覆蓋早期樣式。 或者，選擇:popover-open屬性：>

這允許將動畫添加到開放狀態（靈感來自Jhey的演示）。 此外，對於視覺效果，彈出案可以包括A

的偽元素，類似於[popover]>。 Mojtaba的年鑑示例非常好。

/* All popovers */
[popover] { border: 0; }

/* Specific popover */
#wave[popover] { border: 0; }

/* Equivalent to :popover-open */
#wave:popover-open { border: 0; }

可能性很大！ CSS處理可見性變得更加簡單。 米歇爾·巴克（Michelle Barker）指出，這更像是一個“ toggletip”（點擊控制），而不是懸停工具提示，她的帖子​​顯示了它與CSS錨定位（隨著支持的增長）的整合程度。 Jhey是另一個很棒的資源，強調了彈出案不僅限於彈出案。它可以用於具有可見性的其他UI元素，例如滑出菜單。

。

>已經很晚了，還有更多的探索，但是即使是最初的嘗試也很有希望。 以下是進一步學習的資源列表：

::backdrop <dialog></dialog>popover可訪問性：瀏覽器行為（hidde de vries）

使用

>和

用於模態（hidde de vries）

打開UI和popover api（brecht de ruyte）

高級形式控製樣式（Brecht de ruyte）

HTML工具提示（Chris coyier）

popover API >

比較popover api和popover（logrocket）<dialog></dialog>>

感謝您讓我彈出！

>

以上是poppin＆＃039;在的詳細內容。更多資訊請關注PHP中文網其他相關文章！