讓我們來探索一下

的功能更詳細。

使用的核心方面

HTML 標(biāo)籤建立一個預(yù)設(shè)的隱藏對話框，可以用作彈出視窗或模態(tài)視窗。

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

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

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

對話方塊視窗開啟方法

— 彈出視窗：

—模態(tài)視窗：

在這兩種情況下，開啟標(biāo)籤將其 open 屬性設(shè)為 true。直接設(shè)定它會將對話方塊作為彈出視窗而不是模式開啟。要渲染模態(tài)窗口，您必須使用適當(dāng)?shù)姆椒ā２恍枰?JavaScript 來建立最初開啟的彈出視窗。

試試看：

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

對話方塊視窗關(guān)閉方法

對話方塊視窗以相同的方式關(guān)閉，無論它們?nèi)绾伍_啟。以下是關(guān)閉彈出視窗或模式視窗的幾種方法：

——使用 .close() 方法：

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

— 按 Esc 鍵：

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

試試看：

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

關(guān)閉時回傳值

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

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

仔細看看它是如何運作的

讓我們更深入了解對話方塊視窗的機制及其瀏覽器實現(xiàn)的細節(jié)。

彈出視窗的機制

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

模態(tài)視窗的機制

模態(tài)視窗的設(shè)計和工作方式比彈出視窗更複雜。

文件疊加

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

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

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

在 MDN 上了解有關(guān) 堆疊上下文 的更多資訊。

要了解有關(guān)頂層中呈現(xiàn)的元素的更多信息，請訪問 MDN。

文件攔截

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

除了模態(tài)視窗之外的所有元素都會自動設(shè)定inert屬性，阻止使用者操作。它會停用點擊和焦點事件，並使螢?zāi)婚喿x器和其他輔助技術(shù)無法存取元素。

在 MDN 上了解有關(guān) inert 屬性的更多資訊。

專注行為

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

對話方塊關(guān)閉後，焦點回到開啟它的元素。

解決模態(tài)視窗的使用者體驗問題

不幸的是，

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

滾動阻塞

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

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

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

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

透過點選視窗外部關(guān)閉對話框

這是模態(tài)視窗的標(biāo)準(zhǔn) UX 場景，可以透過多種方式實現(xiàn)。這裡有兩種方法可以解決這個問題：

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

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