對話方塊

對話方塊元素是 HTML 中表示任何類型對話方塊的實用元素，請瞭解其運作方式。

強制回應對話方塊是網頁上的一種特殊彈出式方塊，會中斷使用者操作，讓他們專注於該方塊。在某些情況下，彈出對話方塊是合理的做法，但請務必謹慎考慮後再採取行動。強制回應對話方塊會讓使用者專注於特定內容，並暫時忽略網頁的其餘部分。

對話方塊可以是強制回應 (只能與對話方塊中的內容互動)，也可以是非強制回應 (仍可與對話方塊外的內容互動)。強制回應對話方塊會顯示在網頁內容的頂端。頁面其餘部分會停用，且預設會以半透明背景遮蓋。

語意 HTML <dialog> 元素可建立對話方塊，並具備語意、鍵盤互動，以及 HTMLDialogElement 介面的所有屬性和方法。

以下是模式對話方塊的範例 <dialog>。使用「Open modal dialog」(開啟互動式對話方塊) 按鈕開啟對話方塊。開啟對話方塊後，可以透過三種方式關閉：按下 Esc 鍵、透過設有 formmethod="dialog" 集的按鈕提交表單 (或表單本身設有 method="dialog" 集)，以及 HTMLDialogElement.close() 方法。

HTMLDialogElement 有三種主要方法，以及從 HTMLElement 繼承的所有方法。

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

因為這個 <dialog> 是以 HTMLDialogElement.showModal() 方法開啟，所以是強制回應對話方塊。開啟互動對話方塊時，除了對話方塊本身，其他所有項目都會停用並遭到遮蔽。如果您將游標懸停在對話方塊外的 UI 上，會發現所有元素的行為都像是已設定 pointer-events: none;，就連開啟對話方塊的按鈕也不會對互動做出反應。

開啟對話方塊後，焦點會移至對話方塊。焦點會設在該對話方塊中，依序鍵盤導覽順序的第一個元素。 如果重複按下 tab 鍵，在開啟強制回應對話方塊時，只有對話方塊內的內容可以取得焦點。只要對話方塊開啟，互動對話方塊以外的所有內容都會處於閒置狀態。

無論對話方塊是否為強制回應，關閉後焦點都會回到開啟對話方塊的元素。請避免在沒有使用者動作的情況下，以程式輔助方式開啟對話方塊。如果必須這麼做，請務必將焦點放回對話方塊開啟前的位置，尤其是使用者關閉對話方塊但未與其互動時。

您可以使用全域 inert 屬性停用元素及其所有子項，但任何有效對話方塊除外。使用 showModal() 開啟強制回應對話方塊時，系統會一併停用或停滯該對話方塊，不會明確設定屬性。

您可以使用 ::backdrop 虛擬元素，設定遮蔽對話方塊以外所有內容的背景樣式。只有在透過 .showModal() 方法顯示 <dialog> 時，才會顯示背景。這個虛擬元素會比對所有背景，包括使用 FullScreen API 時顯示的背景，例如以全螢幕模式觀看影片時，影片的長寬比與螢幕或顯示器不同。

非模式對話方塊

HTMLDialogElement.show() 同樣會開啟對話方塊，但不會新增背景幕，也不會導致任何項目變成靜態。 Esc 鍵無法關閉非模式對話方塊。因此，請務必加入關閉非模式對話方塊的方法。這麼做時，如果關閉按鈕位於對話方塊外，請注意焦點會移至開啟對話方塊的元素，這可能不是最佳使用者體驗。

雖然規格並未正式要求提供關閉對話方塊的按鈕，但建議您視為必要。Esc 鍵會關閉互動式對話方塊，但不會關閉非互動式對話方塊。可接收焦點的顯示按鈕可提升無障礙功能和使用者體驗。

關閉對話方塊

您不需要使用 HTMLDialogElement.close() 方法關閉對話方塊。完全不需要 JavaScript。如要關閉 <dialog>，請加入含有對話方塊方法的表單，方法是在 <form> 上設定 method="dialog"，或在按鈕上設定 formmethod="dialog"。

使用者透過 dialog 方法提交表單時，系統會保留使用者輸入的資料狀態。雖然有提交事件，且表單會通過限制驗證 (除非設定 novalidate)，但使用者資料不會清除或提交。不使用 JavaScript 的關閉按鈕可編寫為：

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

您可能已注意到，這個範例中，關閉 <button> 上設定了 autofocus 屬性。在 <dialog> 內設定 autofocus 屬性的元素不會在網頁載入時收到焦點 (除非網頁載入時對話方塊可見)。但對話方塊開啟時，焦點會移至這些元素。

根據預設，開啟對話方塊時，對話方塊內第一個可聚焦的元素會取得焦點，除非對話方塊內的不同元素已設定 autofocus 屬性。在關閉按鈕上設定 autofocus 屬性，可確保對話方塊開啟時，焦點會移至該按鈕。但請務必審慎考慮，再決定是否要在 <dialog> 中加入 autofocus。系統會略過自動聚焦元素之前的所有元素。我們會在重點課程中進一步討論這項屬性。

HTMLDialogElement 介面包含 returnValue 屬性。提交含有 method="dialog" 的表單時，系統會將 returnValue 設為用於提交表單的提交按鈕的 name (如有)。如果我們編寫的是 <button type="submit" name="toasty">close</button>，則 returnValue 會是 toasty。

開啟對話方塊時，系統會顯示布林值 open 屬性，表示對話方塊處於啟用狀態，可供互動。如果透過新增 open 屬性 (而非 .show() 或 .showModal()) 開啟對話方塊，該對話方塊將不會是強制回應模式。HTMLDialogElement.open 屬性會傳回 true 或 false，視對話方塊是否可供互動而定，而非是否為強制回應模式。

雖然 JavaScript 是開啟對話方塊的首選方法，但網頁載入時包含 open 屬性，然後使用 .close() 移除該屬性，有助於確保即使沒有 JavaScript，對話方塊也能正常運作。

其他詳細資訊

請勿使用 tabindex

用來開啟對話方塊的元素，以及對話方塊中的關閉按鈕 (可能還有其他內容) 可以接收焦點並進行互動。<dialog> 元素不具互動性，也不會收到焦點。請勿將 tabindex 屬性新增至對話方塊本身。

ARIA 角色

隱含角色為 dialog。如果對話方塊是確認視窗，用來傳達重要訊息，且需要確認或其他使用者回應，請設定 role="alertdialog"。 對話方塊也應具備可存取的名稱。如果可見文字可做為無障礙名稱，請新增 aria-labelledby="idOfLabelingText"。

CSS 預設值

請注意，瀏覽器會為 dialog 提供預設樣式。Firefox、Chrome 和 Edge 會在使用者代理程式樣式表設定 color: CanvasText; background-color: Canvas;，Safari 則會設定 color: black; background-color: white;。color是從 dialog 繼承而來，而非 body 或 :root，這可能不符預期。background-color 屬性不會繼承。

隨堂測驗

測試您對對話方塊元素的瞭解程度。

如何設定對話方塊後方的區域樣式？

使用 background 屬性。
使用 ::backdrop 虛擬元素。
使用 ::background 虛擬元素。