對話方塊

強制回應對話方塊是網頁上特殊類型的彈出式方塊，這種彈出式視窗會幹擾使用者專注於自己身上。另有 一些彈出對話方塊的有效用途，但考量性 。強制回應對話方塊會強迫使用者專注於特定內容，而且暫時至少忽略了 網頁的其他部分

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

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

強制回應對話方塊

以下是強制回應 <dialog> 的範例。開啟含有「開啟互動視窗」的對話方塊按鈕。開啟後，您可以透過三種方式關閉對話方塊：Escape 鍵、使用 附有 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 設定樣式 虛擬元素只有在 <dialog> 與 .showModal() 方法一併顯示時，才會顯示背景幕。這個虛擬元素 符合所有背景，包括使用 FullScreen API 時顯示的背景； 例如，影片以全螢幕模式觀看時，顯示比例與螢幕或顯示器不同。

非強制回應對話方塊

HTMLDialogElement.show() 同樣會開啟對話方塊，但不會新增背景或導致任何項目成為片段。 Escape 鍵不會關閉非強制回應對話方塊。因此，在選擇評估方法時 使用者開啟非強制回應對話方塊時進行這項操作時，如果距離對話方塊較遠，就會發現焦點會移至元素 但開啟對話方塊卻不一定能呈現最佳使用者體驗

雖然這項規格並未正式要求關閉對話方塊，但請將此按鈕視為必要。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>

您可能已經注意到 autofocus 屬性 是在本例的關閉 <button> 上設定在 <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 屬性並未沿用。

隨堂測驗

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