對話方塊

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

強制回應對話方塊是網頁上一種特殊的彈出式視窗，會中斷使用者操作，讓他們專注於該對話方塊。另有 一些彈出對話方塊的用途，但非常考量 。強制回應對話方塊會強迫使用者專注於特定內容，而且暫時至少忽略了 網頁的其他部分

對話方塊可以是強制回應 (只有對話方塊中的內容可以互動) 或非強制回應 (但仍然能與 對話方塊以外的內容)。模式對話方塊會顯示在其他網頁內容上方。其餘 的網頁都會是 inert，且根據預設，會以半透明的背景遮蔽。

用於建立對話方塊的語意 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() 同樣會開啟對話方塊，但不會新增背景，或導致任何項目成為推論。 Escape 鍵不會關閉非強制回應對話方塊。因此，在選擇評估方法時 使用者開啟非強制回應對話方塊時進行這項操作時，如果距離對話方塊較遠，就會發現焦點會移至元素 但開啟對話方塊卻不一定能呈現最佳使用者體驗

雖然規格並未明文規定必須提供關閉對話方塊的按鈕，但建議您提供此按鈕。逃逸鍵會關閉互動對話方塊，但不會關閉非互動對話方塊。可接收焦點的顯示按鈕可改善無障礙和使用者體驗。

關閉對話方塊

您不需要使用 HTMLDialogElement.close() 方法即可關閉對話方塊。完全不需要 JavaScript。關閉「<dialog>」 在沒有 JavaScript 的情況下加入含有對話方塊方法的表單，方法是在 <form> 或 formmethod="dialog" 上設定 method="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 屬性。

進行隨堂測驗

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