強制回應對話方塊是一種特殊的彈出式方塊，會中斷使用者在網頁上的操作。雖然彈出對話方塊有其合理用途，但新增前仍應審慎考量。強制使用者專注於特定內容，並暫時忽略頁面的其餘部分。
對話方塊可以是：
- 互動視窗：使用者只能與對話方塊中的內容互動。強制回應對話方塊會顯示在網頁內容上方。頁面會設為惰性，且預設會由半透明背景遮蓋。
- 非強制回應：使用者可以與對話方塊外的內容互動。
用於建立對話方塊的語意 HTML <dialog> 元素，隨附語意、鍵盤互動，以及 HTMLDialogElement 介面的所有屬性和方法。
強制回應對話方塊
請查看 <dialog> 形式的範例。按一下「Open modal 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 虛擬元素，設定遮蓋對話方塊以外所有內容的背景樣式。只有在使用 .showModal() 方法顯示 <dialog> 時，才會顯示背景。這個虛擬元素會比對所有背景，包括使用 FullScreen API 時顯示的背景，例如以全螢幕模式觀看影片，但影片的顯示比例與螢幕或顯示器不同。
非互動式對話方塊
HTMLDialogElement.show() 同樣會開啟對話方塊，但不會新增背景，也不會導致任何內容失效。Escape 鍵只能關閉強制回應對話方塊，無法關閉非強制回應對話方塊。因此，請務必提供關閉非強制回應對話方塊的方法。如果關閉選項位於對話方塊外，焦點會回到開啟對話方塊的元素。這並非理想的使用者體驗。
雖然規格並未正式要求關閉對話方塊的按鈕，但請視為必要。可接收焦點的可見按鈕，能提升無障礙程度和使用者體驗。
關閉對話方塊
您不需要使用 HTMLDialogElement.close() 方法來關閉對話方塊。完全不需要 JavaScript。如要在不使用 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 屬性不會沿用。
隨堂測驗
測試你對 dialog 元素的瞭解程度。
如何設定對話方塊後方區域的樣式？
::background 虛擬元素。::backdrop 虛擬元素。background 屬性。