標籤

｜HTML+CSS｜Create Popup Easily with Popover API

Create Popup Easily with Popover API

要製作彈出視窗，可以使用 Popover API，一個新興的 HTML 特性，提供標準化方式處理彈出內容。透過 HTML 屬性即可控制大部分行為，減少 JavaScript 的使用，讓開發更簡單易維護。以下將示範如何用 Popover API 實現彈出視窗功能。

以下是範例的 html 結構說明：
按鈕需設置 popovertarget 屬性，其值必須對應彈窗區塊的 ID，才能觸發彈窗。彈窗內也放置控制彈窗的按鈕，在開啟視窗後作為關閉用。

彈窗區塊 popover 屬性設為 "manual" 需手動觸發和關閉（預設值為 "auto" ，是支援點擊彈窗外部關閉）。改變 popovertargetaction 操作 popover 行為，有三種 "hide"、"show"、"toggle"（預設值為 "toggle"）。

html

因為預設彈窗是無動畫，所以在彈窗區塊 .popup-block 的 transition 屬性要加 "overlay 0.5s allow-discrete"、"display 0.5s allow-discrete" ，才能 display:none 切換到 display:block 有過渡動畫，之後在 @starting-style 設定未開啟彈窗樣式，並在 .popup-block:popover-open 設定彈窗開啟樣式。

彈窗背景遮罩 ::backdrop 也需在 @starting-style 和 .popup-block:popover-open::backdrop 設定相應的起始和開啟樣式。

css
.popup-block{ transition: opacity 0.5s, transform 0.5s, overlay 0.5s allow-discrete, display 0.5s allow-discrete;
              /* 將 overlay、display 添加到 transition
                 讓消失時間延遲，而不是立即消失 
                 並設置 transition-behavior: allow-discrete 
                 才能 display:none 切換到 display:block 有過渡動畫 */
              opacity: 0;
              transform: translate(0, 15%);
            }

.popup-block:popover-open{ /* 設置彈窗開啟樣式 */
                           opacity: 1;
                           transform: translate(0, 0);
                          }

@starting-style{ /* 設置未開啟彈窗樣式 */
   .popup-block:popover-open{ 
                opacity: 0;
                transform: translate(0, 15%);
                }
}

/* 彈窗背景遮罩 ::backdrop */
.popup-block::backdrop{ transition: background-color 1.1s, backdrop-filter 1.1s;
                        backdrop-filter: blur(0px);
                        }
.popup-block:popover-open::backdrop{ /* 設置彈窗開啟樣式 */
             background-color: rgba(0, 0, 0, 0.15);
             backdrop-filter: blur(3px);
             transition: background-color 0.42s, backdrop-filter 0.42s;
             }

@starting-style{ /* 設置未開啟彈窗樣式 */
   .popup-block:popover-open::backdrop{
                background-color: rgba(0, 0, 0, 0);
                backdrop-filter: blur(0px); 
                }
}

圖素來源：
Customize and apply backgrounds fast | SVG Backgrounds
（https://www.svgbackgrounds.com/）

標籤：