讓我們來探索一下
使用的核心方面
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() 開啟模態視窗時，
層的概念指的是堆疊上下文，它定義了元素如何沿著相對於使用者的Z軸定位。在 CSS 中設定 z-index 值會為元素建立一個堆疊上下文，其中子元素的位置是在該上下文中計算的。模態視窗始終位於該層次結構的頂部，因此不需要 z-index。
在 MDN 上了解有關 堆疊上下文 的更多資訊。
要了解有關頂層中呈現的元素的更多信息，請訪問 MDN。
文件攔截
當模態元素在頂層渲染時，會建立一個與可見文件區域大小相同的 ::backdrop 偽元素。即使設定了pointer-events: none CSS 規則，此背景也會阻止與頁面其餘部分的互動。
除了模態視窗之外的所有元素都會自動設定inert屬性，阻止使用者操作。它會停用點擊和焦點事件，並使螢幕閱讀器和其他輔助技術無法存取元素。
在 MDN 上了解有關 inert 屬性的更多資訊。
專注行為
當模式開啟時，其中的第一個可聚焦元素會自動獲得焦點。若要變更最初聚焦的元素，可以使用 autofocus 或 tabindex 屬性。無法為對話方塊元素本身設定 tabindex，因為它是頁面上唯一不套用惰性邏輯的元素。
對話方塊關閉後，焦點回到開啟它的元素。
解決模態視窗的使用者體驗問題
不幸的是，
滾動阻塞
儘管原生 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"。
以下是一些提高
詠嘆調標記者
始終在對話方塊視窗中包含標題，並為
如果您需要設定 ::backdrop 偽元素的樣式，請確保將這些樣式也套用到對應的 .backdrop 元素，以確保與舊版瀏覽器的相容性：
建議透過動態匯入連接polyfill，並且僅適用於不支援
結論
原生 HTML5
在本文中，我們討論了以下主題：
- 出現問題元素求解；
- 與的互動元素的 API；
- 對話方塊視窗如何在瀏覽器層級運作；
- 模態框的常見問題及其解決方案；
- 改進了的可訪問性螢幕閱讀器等輔助技術的元素；
- 擴充瀏覽器對
最後，我邀請您查看純 JS 中的模態視窗組件實現，其中考慮了文章中討論的主要方面：https://codepen.io/alexgriss/pen/abXPOPP
這就是我想分享的關於使用
