對話方塊元素是實用元素,用於代表其中的任何類型的對話方塊 瞭解運作方式。
強制回應對話方塊是網頁上一種特殊的彈出式視窗,會中斷使用者操作,讓他們專注於該對話方塊。另有 一些彈出對話方塊的用途,但非常考量 。強制回應對話方塊會強迫使用者專注於特定內容,而且暫時至少忽略了 網頁的其他部分
對話方塊可以是強制回應 (只有對話方塊中的內容可以互動) 或非強制回應 (但仍然能與 對話方塊以外的內容)。模式對話方塊會顯示在其他網頁內容上方。其餘 的網頁都會是 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
屬性。
進行隨堂測驗
測驗您對對話方塊元素的瞭解程度。
您如何為對話方塊後方的區域設定樣式?
::backdrop
虛擬元素。::background
擬似元素。background
屬性。