讓我們探索一下

使用的核心方面

HTML 標(biāo)簽創(chuàng)建一個(gè)默認(rèn)隱藏的對(duì)話框，可以用作彈出窗口或模態(tài)窗口。

彈出窗口經(jīng)常用于顯示簡(jiǎn)單的通知，例如 Cookie 消息、消失的 Toast 警報(bào)、工具提示或右鍵單擊上下文菜單元素。

模態(tài)窗口幫助用戶(hù)專(zhuān)注于特定任務(wù)，例如需要用戶(hù)確認(rèn)的通知和警告、復(fù)雜的交互表單以及圖像或視頻的燈箱。

彈出窗口不會(huì)阻止與頁(yè)面的交互，而模式窗口會(huì)覆蓋文檔、使背景變暗并阻止其他操作。此行為無(wú)需額外的樣式或腳本即可實(shí)現(xiàn)；唯一的區(qū)別是打開(kāi)對(duì)話框的方法。

對(duì)話框窗口打開(kāi)方法

— 彈出窗口：

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

—模態(tài)窗口：

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

在這兩種情況下，打開(kāi)<對(duì)話框>標(biāo)簽將其 open 屬性設(shè)置為 true。直接設(shè)置它會(huì)將對(duì)話框作為彈出窗口而不是模式打開(kāi)。要渲染模態(tài)窗口，您必須使用適當(dāng)?shù)姆椒?。不需?JavaScript 來(lái)創(chuàng)建最初打開(kāi)的彈出窗口。

<dialog open>Hi, I'm a popup!</dialog>

嘗試一下：

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

對(duì)話框窗口關(guān)閉方法

對(duì)話框窗口以相同的方式關(guān)閉，無(wú)論它們?nèi)绾未蜷_(kāi)。以下是關(guān)閉彈出窗口或模式窗口的幾種方法：

——使用 .close() 方法：

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

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

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

— 按 Esc 鍵：

使用 Esc 關(guān)閉僅適用于模式窗口。它首先觸發(fā)取消事件，然后關(guān)閉，從而可以輕松警告用戶(hù)表單中未保存的更改。

嘗試一下：

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

關(guān)閉時(shí)返回值

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

嘗試一下：https://codepen.io/alexgriss/pen/ZEwmBKx

仔細(xì)看看它是如何工作的

讓我們更深入地了解對(duì)話框窗口的機(jī)制及其瀏覽器實(shí)現(xiàn)的細(xì)節(jié)。

彈出窗口的機(jī)制

打開(kāi)一個(gè)<對(duì)話框>作為帶有 .show() 的彈出窗口或 open 屬性會(huì)自動(dòng)將其定位為 DOM 中的position:absolute?；?CSS 樣式（例如邊距和邊框）應(yīng)用于元素，窗口內(nèi)的第一個(gè)可聚焦項(xiàng)目將通過(guò) autofocus 屬性自動(dòng)獲得焦點(diǎn)。頁(yè)面的其余部分保持互動(dòng)。

模態(tài)窗口的機(jī)制

模態(tài)窗口的設(shè)計(jì)和工作方式比彈出窗口更復(fù)雜。

文檔疊加

使用 .showModal() 打開(kāi)模態(tài)窗口時(shí)，

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

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

要了解有關(guān)頂層中呈現(xiàn)的元素的更多信息，請(qǐng)?jiān)L問(wèn) MDN。

文件攔截

當(dāng)模態(tài)元素在頂層渲染時(shí)，會(huì)創(chuàng)建一個(gè)與可見(jiàn)文檔區(qū)域大小相同的 ::backdrop 偽元素。即使設(shè)置了指針事件：未設(shè)置 CSS 規(guī)則，此背景也會(huì)阻止與頁(yè)面其余部分的交互。

除了模態(tài)窗口之外的所有元素都會(huì)自動(dòng)設(shè)置 inert 屬性，阻止用戶(hù)操作。它會(huì)禁用單擊和焦點(diǎn)事件，并使屏幕閱讀器和其他輔助技術(shù)無(wú)法訪問(wèn)這些元素。

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

專(zhuān)注行為

當(dāng)模式打開(kāi)時(shí)，其中的第一個(gè)可聚焦元素會(huì)自動(dòng)獲得焦點(diǎn)。要更改最初聚焦的元素，可以使用 autofocus 或 tabindex 屬性。無(wú)法為對(duì)話框元素本身設(shè)置 tabindex，因?yàn)樗琼?yè)面上唯一不應(yīng)用惰性邏輯的元素。

對(duì)話框關(guān)閉后，焦點(diǎn)返回到打開(kāi)它的元素。

解決模態(tài)窗口的用戶(hù)體驗(yàn)問(wèn)題

不幸的是，

滾動(dòng)阻塞

盡管原生 HTML5 模式窗口創(chuàng)建了一個(gè) ::backdrop 偽元素來(lái)阻止與其下方內(nèi)容的交互，但頁(yè)面滾動(dòng)仍然處于活動(dòng)狀態(tài)。這可能會(huì)分散用戶(hù)的注意力，因此建議在模式打開(kāi)時(shí)截?cái)嗾牡膬?nèi)容：

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

每次打開(kāi)和關(guān)閉模態(tài)窗口時(shí)，都必須動(dòng)態(tài)添加和刪除這樣的 CSS 規(guī)則。這可以通過(guò)操作包含以下 CSS 規(guī)則的類(lèi)來(lái)實(shí)現(xiàn)：

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

如果 :has 選擇器的支持狀態(tài)滿(mǎn)足項(xiàng)目的要求，您也可以使用。

<dialog open>Hi, I'm a popup!</dialog>

嘗試一下：https://codepen.io/alexgriss/pen/XWOyVKj

通過(guò)單擊窗口外部關(guān)閉對(duì)話框

這是模態(tài)窗口的標(biāo)準(zhǔn) UX 場(chǎng)景，可以通過(guò)多種方式實(shí)現(xiàn)。這里有兩種方法可以解決這個(gè)問(wèn)題：

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

單擊 ::backdrop 偽元素被視為單擊對(duì)話框元素本身。因此，如果將模式窗口的整個(gè)內(nèi)容包裝在附加的

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

<dialog open>Hi, I'm a popup!</dialog>

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

<dialog open>Hi, I'm a popup!</dialog>