平台控制項關閉對話方塊

網頁功能： <dialog closedby>

開啟互動強制回應對話方塊時，使用者會希望使用熟悉的控制項關閉對話方塊：按下鍵盤上的 Esc 鍵、使用行動平台上的返回按鈕或手勢，或使用輔助技術的關閉手勢。

<dialog> 元素首次推出時，可以使用 Esc 鍵關閉，但無法使用其他平台控制項，例如行動裝置上的返回按鈕/手勢。<dialog> 元素新增 closedby 屬性後，在模態狀態下開啟的 <dialog> 元素 (即透過 JavaScript 中 <dialog> 元素的 showModal() 方法以命令式開啟，或透過 show-modal 叫用器指令以宣告式開啟)，已套用擴充行為，可回應更多平台專屬的關閉要求控制項。因此，如果開發人員已使用 <dialog> 元素，就不需要進行任何特定變更。

<!-- MANDATORY: must be opened with either `showModal()` with JavaScript or the `show-modal` command using declarative command invokers in order respond to close requests including platform-specific controls. -->
<dialog aria-labelledby="example">
  <h1 id="example">Example</h1>
  <p>Modal that can be dismissed with close requests.</p>
</dialog>

在模態狀態下開啟時，沒有 closedby 屬性的對話方塊會回應關閉要求，就像明確將 closedby 屬性設為 closerequest 一樣。

<!-- This is unnecessary as it is the default behavior for modal dialogs -->
<dialog closedby="closerequest" aria-labelledby="example">
  <h1 id="example">Example</h1>
  <p>Modal that can be dismissed with close requests.</p>
</dialog>

如果您也想要「輕觸關閉」行為，則必須將 closedby 設為 any：

<dialog closedby="any" aria-labelledby="example">
  <h1 id="example">Example</h1>
  <p>Modal that can be dismissed with close requests and light dismiss.</p>
</dialog>

備用策略

在互動視窗狀態下開啟的 <dialog> 元素，已可透過 Esc 關閉，因此不需要備用方案。目前沒有合適的方法可實作行動裝置返回按鈕/手勢的關閉要求，因此建議將這項功能視為漸進增強功能，尤其是考量到還有其他多元包容方法可關閉強制回應對話方塊。同樣地，使用 closedby="any" 的 <dialog> 元素輕觸關閉行為，可視為漸進增強。