彈出式視窗和對話方塊

彈出式視窗是具有 popover 屬性的任何元素，適用於各種互動模式，包括工具提示、快訊、祝賀訊息等。

<div id="my-popover" popover>My popover content</div>

popover 屬性預設會隱藏元素，您必須提供使用者開啟元素的方式。雖然彈出式視窗會放置在頂層，高於所有其他內容，但並非強制回應。這表示您仍可與彈出式視窗外的內容互動。

控制彈出式視窗

在探討不同類型的快顯視窗及其行為之前，請先瞭解如何開啟及關閉快顯視窗。

以宣告方式

您可以使用按鈕 (和 button 類型的輸入內容) 和 popovertarget 屬性，完全在 HTML 中控制浮動視窗，不必使用 JavaScript。

先前程式碼片段中的快顯視窗具有 id my-popover，您可以使用這個屬性參照快顯視窗。

<button popovertarget="my-popover">Toggle</button>

您也可以使用 popovertargetaction="show" 和 popovertargetaction="hide" 指定按鈕應開啟或關閉彈出式視窗。

使用 JavaScript

您也可以使用 JavaScript 控制彈出式視窗，這在您想回應使用者點選按鈕以外的動作時，顯示彈出式視窗就很有用。如要這麼做，您需要取得快顯視窗元素，然後呼叫 showPopover()、hidePopover() 或 togglePopover()。

快顯視窗類型

在網站上新增彈出式視窗時，請考量許多互動。如何開啟？使用者如何關閉這項通知？其他開啟的彈出式視窗會發生什麼情況？有三種彈出式視窗，您可以選擇符合使用情況所需的行為和互動類型。

自動彈出式視窗

自動彈出式視窗內建最多功能，如果您未指定類型，系統會預設使用這類視窗。

<div id="popover" popover>My popover</div>

在許多情況下，您不希望同時開啟多個自動顯示的浮動視窗，因此自動顯示的浮動視窗會在開啟時關閉其他自動顯示的浮動視窗。這些元素也支援「輕觸即關閉」，也就是說，如果點選彈出式視窗以外的區域，系統會自動關閉視窗。你也可以按 Esc 鍵關閉。

手動彈出式視窗

雖然自動彈出式視窗行為涵蓋許多用途，但有時您可能需要進一步控管彈出式視窗。手動顯示的快顯視窗可讓您進一步控管行為，但同時也必須承擔更多責任。

<div id="popover" popover="manual">My popover</div>

這個浮動視窗只會在您明確關閉時關閉，無法透過輕觸關閉或 Esc 鍵關閉。但可同時開啟多個浮動視窗。

提示彈出式視窗

您也可以使用彈出式視窗，在網頁中加入工具提示。在這個模式中，您希望能夠將游標懸停在項目上，並查看說明。一次只能開啟一個。如果使用自動彈出式視窗，開啟一個視窗時，系統會關閉所有其他開啟的自動彈出式視窗。如果您使用手動顯示的快顯視窗，就必須手動實作許多行為，包括關閉其他快顯視窗。提示彈出式視窗提供第三個選項，行為與自動彈出式視窗類似。不過，開啟提示彈出式視窗不會關閉自動彈出式視窗。

<div id="popover" popover="hint">My popover</div>

提示快顯視窗適用於主要內容的次要補充資訊。您通常會希望使用懸停或焦點等非點擊事件，觸發提示快顯視窗。

變更彈出式視窗的位置

根據預設，彈出式視窗會開啟在畫面中央。這些元素會新增至頂層，位於所有其他內容上方，且可相對於可視區域定位。

這不一定是理想做法，因為您通常希望將快顯視窗放在觸發該視窗的項目附近。錨定位置可提供這項功能。

錨點定位有兩個步驟：定義錨點元素，以及相對於該錨點放置元素。彈出式視窗可以為您設定隱含錨點，處理第一個步驟。使用 <button popovertarget> 開啟快顯視窗時，按鈕是隱含錨點。如果您使用 JavaScript 開啟彈出式視窗，可以透過 source 選項設定隱含錨點。

根據預設，系統會使用 margin: auto 將快顯視窗置中。如要使用錨點定位，您可能需要設定 margin: unset 來覆寫該值。

樣式和動畫

::backdrop 虛擬元素

彈出式視窗會在頂層開啟，顯示在網頁上所有其他內容的上方。彈出式視窗下方是可設定樣式的 ::backdrop 虛擬元素。

請注意，彈出式視窗外的內容並非處於閒置狀態，您仍可點選按鈕，並使用鍵盤瀏覽頁面。請勿遮蓋網頁內容，例如套用重度模糊效果或將背景設為不透明的顏色。

:popover-open 虛擬類別

假設您想使用 CSS 格線配置彈出式視窗內容，您新增 [popover]{ display: grid }，突然之間，所有彈出式視窗都顯示出來。這是因為系統會使用 display: none 隱藏彈出式視窗。您可以使用 :popover-open 虛擬類別，只在彈出式視窗開啟時套用樣式。

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

如果您要為彈出式視窗製作動畫，:popover-open 也很有用。

為彈出式視窗製作動畫

動畫包含 3 個步驟：

1. @starting-style {popover:popover-open { } }-The initial styles for the popover as soon as it is visible. 請注意，這必須在步驟 2 之後的樣式表定義。
2. popover:popover-open { }-The styles for the popover when it is open.
3. popover { } - 彈出式視窗關閉時的樣式。

如果彈出式視窗未開啟，系統會使用 display: none 隱藏該視窗。如要為此動畫設定動畫效果，您需要設定 transition-behavior: allow-discrete，並將 display 新增至 transition 中的屬性清單。

如果您使用隱含錨點定位快顯視窗，也需要在 transition 的屬性清單中加入 overlay。從頂層移除快顯視窗後，系統就會移除隱含錨點關係，因此在 overlay 屬性中新增轉場效果，可延遲移除作業，直到結束轉場效果完成為止。

Popover 之間的互動

網頁上可能有多個快顯視窗，而這些視窗的互動方式取決於類型和使用方式。

巢狀彈出式視窗

在某些情況下，您可能需要在另一個浮動視窗內開啟浮動視窗。舉例來說，您可能有一個彈出式選單，其中一個選單項目會開啟子選單。使用者關閉主選單時，您不希望子選單保持開啟狀態。彈出式視窗可協助自動處理這項作業。

如果您從提示彈出式視窗開啟提示彈出式視窗，或從自動彈出式視窗開啟自動彈出式視窗，這些彈出式視窗會放入堆疊中。關閉快顯視窗時，堆疊中後續的所有快顯視窗也會一併關閉。這也適用於輕觸即關閉功能，如果您點選快訊，堆疊中後續的所有快訊都會關閉，但先前的快訊會保持開啟。

如果來源元素位於快顯視窗內，系統會將快顯視窗新增至堆疊。在按鈕上使用 popovertarget 時，系統會自動設定來源元素，或透過 JavaScript 在呼叫 .showPopover({source}) 或 .togglePopover({source}) 時設定 source 選項。

自動彈出式視窗和提示彈出式視窗分別有各自的堆疊。不過，如果您從自動彈出式視窗內開啟提示彈出式視窗，系統會將提示彈出式視窗加入自動堆疊。

請注意，提示彈出式視窗適用於較簡單的暫時性資訊，因此您無法從提示彈出式視窗觸發自動彈出式視窗。

如果您使用手動顯示的快顯視窗，則必須手動管理所有這些項目。

關閉其他類型的彈出式視窗

您已瞭解開啟自動快顯視窗會關閉其他自動快顯視窗，但不同類型之間如何互動？請參閱這個範例網頁，瞭解這三種標記的使用方式。導覽選單包含按鈕，可使用自動彈出式視窗開啟和關閉。網頁上的文字會使用提示彈出式視窗顯示內容相關的工具提示。最後，系統會顯示含有手動彈出式視窗的訊息，通知使用者背景工作已完成。

工具提示是暫時性的，會在滑鼠游標懸停在文字上時顯示。我們預期一次只會顯示一個工具提示，觸發第二個提示快顯視窗時，第一個提示會關閉。

點選按鈕開啟選單時，提示會關閉，原因有二：首先，點選提示外的位置會觸發輕微關閉動作。其次，開啟自動彈出式視窗會關閉所有開啟的提示彈出式視窗。這是因為使用者已變更專注的內容，提示快顯視窗中的暫時性內容已不再相關。也就是說，如果您在自動彈出式視窗上呼叫 showPopover()，系統會關閉所有開啟的提示彈出式視窗。

下拉式選單會自動彈出。使用下拉式選單時，您會預期一次只開啟一個選單，開啟一個選單時會關閉另一個選單。如您所見，開啟自動彈出式視窗也會關閉所有開啟的提示彈出式視窗。

不過，在下拉式選單開啟時，您可能仍想查看不相關工具提示的內容。顯示提示工具提示不會關閉自動彈出式視窗。

手動彈出式視窗不會受到自動或提示彈出式視窗影響，開啟時也不會關閉任何提示或自動彈出式視窗。不過，如果您點選按鈕開啟手動顯示的浮動視窗，系統會輕觸關閉提示和自動顯示的浮動視窗。

雖然快顯視窗類型之間的互動可能看似複雜，但只要在適當情況下使用這些類型，就能實現常見的使用模式。如果彈出式視窗無法正常互動，請重新檢查您使用的類型。

隨堂測驗