如何使用 HTMLlt;dialog> 元素

在前端開發中，建置或使用預先建置的 UI 元件是一項常見任務。然而，這些組件通常存在限制。它們通常依賴特定的框架，並且需要複雜的、非標準化的邏輯。長期以來，對話方塊視窗等基本 UI 元件依賴自訂實現，或者在更簡單的情況下，依賴內建 JavaScript 方法，例如alert()、prompt() 和confirm()。

好消息是，您現在可以使用本機

來實作此元件。 HTML 元素，它是 HTML5 標準的一部分，並受到所有現代瀏覽器的完全支援。

HTML 標籤於 2013 年 5 月作為 W3C 工作草案的一部分引入，與

等交互元素一起推出。和解決常見的 UI 挑戰。 2014年發布的

最初僅在 Google Chrome 和 Opera 中支援。完全支援 Firefox 和 Safari 直到 2022 年 3 月才出現，推遲了其在生產項目中的採用。然而，隨著主要瀏覽器兩年多的支持，

已經不再可用。元素現在足夠穩定，可以替換自訂

讓我們來探索一下

的功能更詳細。

使用的核心方面

HTML 標籤建立一個預設的隱藏對話框，可以用作彈出視窗或模態視窗。

彈出視窗經常用於顯示簡單的通知，例如 Cookie 訊息、消失的 Toast 警報、工具提示或右鍵單擊上下文功能表元素。

模態視窗可幫助使用者專注於特定任務，例如需要使用者確認的通知和警告、複雜的互動表單以及圖像或影片的燈箱。

彈出視窗不會阻止與頁面的交互，而模式視窗會覆蓋文件、使背景變暗並阻止其他操作。此行為無需額外的樣式或腳本即可實現；唯一的區別是打開對話框的方法。

對話方塊視窗開啟方法

— 彈出視窗：

—模態視窗：

在這兩種情況下，開啟標籤將其 open 屬性設為 true。直接設定它會將對話方塊作為彈出視窗而不是模式開啟。要渲染模態窗口，您必須使用適當的方法。不需要 JavaScript 來建立最初開啟的彈出視窗。

試試看：

• 使用 .show() 方法開啟彈出視窗：https://codepen.io/alexgriss/pen/zYeMKJE
• 使用 .showModal() 方法開啟模態視窗：https://codepen.io/alexgriss/pen/jOdQMeq
• 直接更改open屬性：https://codepen.io/alexgriss/pen/wvNQzRB

對話方塊視窗關閉方法

對話方塊視窗以相同的方式關閉，無論它們如何開啟。以下是關閉彈出視窗或模式視窗的幾種方法：

——使用 .close() 方法：

——透過使用 method="dialog" 屬性觸發表單中的提交事件：

— 按 Esc 鍵：

使用 Esc 關閉僅適用於模式視窗。它首先觸發取消事件，然後關閉，從而可以輕鬆警告用戶表單中未儲存的變更。

試試看：

• 使用 close 方法關閉對話框：https://codepen.io/alexgriss/pen/GRzwjaV
• 透過提交表單關閉對話框：https://codepen.io/alexgriss/pen/jOdQVNV
• 使用 Esc 鍵關閉模態視窗：https://codepen.io/alexgriss/pen/KKJrNKW
• 防止模式視窗透過 Esc 關閉：https://codepen.io/alexgriss/pen/mdvQObN

關閉時回傳值

當使用method="dialog"屬性關閉帶有表單的對話框時，您可以捕獲提交按鈕的值。如果您想根據單擊的按鈕觸發不同的操作，這非常有用。該值儲存在 returnValue 屬性中。

試試看：https://codepen.io/alexgriss/pen/ZEwmBKx

仔細看看它是如何運作的

讓我們更深入了解對話方塊視窗的機制及其瀏覽器實現的細節。

彈出視窗的機制

開啟一個作為帶有 .show() 的彈出視窗或 open 屬性會自動將其定位為 DOM 中的position:absolute。基本 CSS 樣式（例如邊距和邊框）套用於元素，視窗內的第一個可聚焦項目將透過 autofocus 屬性自動獲得焦點。頁面的其餘部分保持互動。

模態視窗的機制

模態視窗的設計和工作方式比彈出視窗更複雜。

文件疊加

使用 .showModal() 開啟模態視窗時，

元素在覆蓋頁面整個可見區域的特殊 HTML 層中呈現。此層稱為頂層，由瀏覽器控制。在某些瀏覽器（例如​​ Google Chrome）中，每個模式都在該層內的單獨 DOM 節點中呈現，在元素檢查器中可見。

層的概念指的是堆疊上下文，它定義了元素如何沿著相對於使用者的Z軸定位。在 CSS 中設定 z-index 值會為元素建立一個堆疊上下文，其中子元素的位置是在該上下文中計算的。模態視窗始終位於該層次結構的頂部，因此不需要 z-index。

在 MDN 上了解有關 堆疊上下文 的更多資訊。

要了解有關頂層中呈現的元素的更多信息，請訪問 MDN。

文件攔截

當模態元素在頂層渲染時，會建立一個與可見文件區域大小相同的 ::backdrop 偽元素。即使設定了pointer-events: none CSS 規則，此背景也會阻止與頁面其餘部分的互動。

除了模態視窗之外的所有元素都會自動設定inert屬性，阻止使用者操作。它會停用點擊和焦點事件，並使螢幕閱讀器和其他輔助技術無法存取元素。

在 MDN 上了解有關 inert 屬性的更多資訊。

專注行為

當模式開啟時，其中的第一個可聚焦元素會自動獲得焦點。若要變更最初聚焦的元素，可以使用 autofocus 或 tabindex 屬性。無法為對話方塊元素本身設定 tabindex，因為它是頁面上唯一不套用惰性邏輯的元素。

對話方塊關閉後，焦點回到開啟它的元素。

解決模態視窗的使用者體驗問題

不幸的是，

的本機實作無法實現。 element 並沒有涵蓋與模式視窗互動的所有面向。接下來，我想回顧一下使用模態視窗時可能出現的主要使用者體驗問題以及如何解決它們。

滾動阻塞

儘管原生 HTML5 模式視窗創建了一個 ::backdrop 偽元素來阻止與其下方內容的交互，但頁面滾動仍然處於活動狀態。這可能會分散使用者的注意力，因此建議在模式開啟時截斷正文的內容：

每次開啟和關閉模態視窗時，都必須動態新增和刪除這樣的 CSS 規則。這可以透過操作包含以下 CSS 規則的類別來實現：

如果 :has 選擇器的支援狀態滿足專案的要求，您也可以使用。

試試看：https://codepen.io/alexgriss/pen/XWOyVKj

透過點選視窗外部關閉對話框

這是模態視窗的標準 UX 場景，可以透過多種方式實現。這裡有兩種方法可以解決這個問題：

基於 ::backdrop 偽元素行為的方法

點選 ::backdrop 偽元素被視為點選對話方塊元素本身。因此，如果將模式視窗的整個內容包裝在附加的

中，然後覆蓋對話方塊元素本身，您可以確定單擊的方向 - 在背景上還是在模式視窗內容上。

不要忘記重置瀏覽器的的預設填滿和邊框樣式。防止模態視窗因意外點擊而關閉的元素：

現在，我們將模態視窗邊框和邊距的常見樣式僅套用於內部包裝器。

我們需要編寫一個函數，僅在點擊背景而不是內部包裝元素時關閉模態視窗：

試試看：https://codepen.io/alexgriss/pen/mdvQXpJ

一種基於確定對話方塊視窗大小的方法

此方法與第一個方法不同，第一個方法需要一個額外的包裝器來容納模態內容。在這裡，您不需要任何額外的包裝。所需要做的只是檢查點擊時間標的位置是否超出元素區域：

試試看：https://codepen.io/alexgriss/pen/NWoePVP

設定對話框視窗的樣式

element 在樣式方面比許多原生 HTML 元素更靈活。以下是一些對話方塊視窗樣式的範例：

使用 ::backdrop 選擇器設定背景樣式：https://codepen.io/alexgriss/pen/ExrOQEO

動畫對話方塊視窗開啟與關閉：https://codepen.io/alexgriss/pen/QWYJQJO

作為側邊欄的模態視窗：https://codepen.io/alexgriss/pen/GRzwxgr

無障礙

很長一段時間，元素存在一些輔助功能問題，但現在它可以很好地與屏幕閱讀器等主要輔助技術配合使用（VoiceOver、TalkBack、NVDA）。

當出現時開啟後，螢幕閱讀器會將焦點移至對話方塊。對於模態視窗，焦點保留在對話框內，直到它關閉。

預設情況下，元素被輔助技術識別為具有 ARIA 屬性 role="dialog"。模態對話框將被識別為具有 ARIA 屬性 aria-modal="true"。

以下是一些提高

的可訪問性的方法。元素：

詠嘆調標記者

始終在對話方塊視窗中包含標題，並為

指定 aria-labelledby 屬性。元素，其值設定為標題的 id。

如果您需要設定 ::backdrop 偽元素的樣式，請確保將這些樣式也套用到對應的 .backdrop 元素，以確保與舊版瀏覽器的相容性：

建議透過動態匯入連接polyfill，並且僅適用於不支援

的瀏覽器。元素：

結論

原生 HTML5

element 是一個相對簡單但功能強大的工具，用於實作模式視窗和彈出視窗。它受到現代瀏覽器的良好支持，可以成功地用於基於 vanilla JS 和任何前端框架的專案。

在本文中，我們討論了以下主題：

• 出現問題元素求解；
• 與的互動元素的 API；
• 對話方塊視窗如何在瀏覽器層級運作；
• 模態框的常見問題及其解決方案；
• 改進了的可訪問性螢幕閱讀器等輔助技術的元素；
• 擴充瀏覽器對
  的支援元素。

最後，我邀請您查看純 JS 中的模態視窗組件實現，其中考慮了文章中討論的主要方面：https://codepen.io/alexgriss/pen/abXPOPP

這就是我想分享的關於使用

的全部內容。 HTML 元素。我希望這篇文章能夠激勵您進行實驗！

以上是如何使用 HTMLlt;dialog> 元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！