Popover API：使用 HTML 建立本機彈出視窗 - 無需 JavaScript

新的 Popover API：無需 JavaScript 即可輕鬆實作 Popover

Popover API 簡化了 popover 的創建，消除了對 JavaScript 函式庫或手動編碼的需求。 跨主要瀏覽器支持，非常容易實現。

了解 Popover API

這個新標準簡化了顯示彈出視窗、自動處理開啟、關閉和可訪問性注意事項的過程。 開發者不再需要獨立管理這些狀態。

建立彈出視窗

基本實作

以下是建立基本彈出視窗的方法：

1. 在 HTML 中建立一個按鈕來觸發彈出視窗。
2. 在按鈕上使用 popover-target 屬性，透過共用 ID（例如 popover）將其連結到元素。
3. 使用相同的 ID 將 popover 屬性套用到要用作彈出視窗的 HTML 元素。

僅此而已！單擊該按鈕將打開彈出窗口，當您單擊外部（輕關閉）時，它會自動關閉。此切換功能是預設行為。

新增關閉按鈕

您可以在彈出視窗中新增關閉按鈕。 為該按鈕提供適當的 popover-target 屬性並明確定義 hide 操作。 一點 CSS 會增強它的外觀。

彈出模式

彈出視窗預設為「自動」模式：

1. 開啟彈出視窗會關閉所有其他開啟的彈出視窗。
2. 輕微消除已啟用。

切換到「手動」模式可防止自動關閉其他彈出視窗並停用燈光關閉。您需要明確管理彈出視窗的開啟和關閉。

設計彈出框

使用背景元素

backdrop 元素特別有用；當彈出視窗打開時，它會覆蓋頁面的其餘部分。

<code class="language-css">[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 ... */</code>

這樣可以輕鬆設定背景樣式，將注意力集中在彈出視窗上。

Popover 與 Modal

了解彈出視窗不是模態框是至關重要的：

1. 彈出視窗不會停用與頁面其餘部分的互動。
2. 當彈出視窗開啟時，您仍然可以點擊其他元素。

對於需要使用者互動才能繼續操作的模式，請使用 dialog.showModal() 代替。 這將需要一些 JavaScript，但它提供了真正的模式功能。

增強 Popover 樣式

使用對話元素

popover 屬性本身是非語義的，允許您為彈出視窗使用 HTML <dialog> 元素。

增加更多內容並套用 CSS

添加更多內容（按鈕等）和 CSS 樣式（字體系列、填充、顏色等）進一步增強了彈出框的外觀。 此範例展示如何設定主按鈕的樣式以獲得更美觀的外觀。

將 JavaScript 與 Popover 結合使用

雖然 API 無需 JavaScript 即可簡化彈出視窗的創建，但您仍然可以使用 JavaScript 進行更高級的控制（例如 showPopover）。

結論

Popover API 提供了一種簡化的方法，可以用最少的程式碼建立優雅且易於存取的 popover。 歡迎您的回饋！ 考慮喜歡或關注更多這樣的內容。

追蹤我：LinkedIn | 中 | 藍天

以上是Popover API：使用 HTML 建立本機彈出視窗 - 無需 JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！