對話方塊

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

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

對話方塊可以是強制回應 (只有對話方塊中的內容可以互動) 或非強制回應 (但仍然能與 對話方塊以外的內容)。模式對話方塊會顯示在其他網頁內容上方。其餘 的網頁都會是 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 屬性會傳回 truefalse,取決於對話方塊是否可供互動,而非是否為模態對話方塊。

雖然 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 屬性。
使用 ::background 擬似元素。
使用 ::backdrop 虛擬元素。