強制回應對話方塊是網頁上特殊類型的彈出式方塊,這種彈出式視窗會幹擾使用者專注於自己身上。另有 一些彈出對話方塊的有效用途,但考量性 。強制回應對話方塊會強迫使用者專注於特定內容,而且暫時至少忽略了 網頁的其他部分
對話方塊可以是強制回應 (只有對話方塊中的內容可以互動) 或非強制回應 (但仍然能與 對話方塊以外的內容)。強制回應對話方塊會顯示在頁面其餘內容的上方。其餘 的網頁都會是 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
屬性並未沿用。
隨堂測驗
測試您對對話方塊元素的瞭解程度。
如何設定對話方塊後方區域的樣式?
::background
虛擬元素。::backdrop
虛擬元素。background
屬性。