Popver API VS 對話方塊模態：相同但不同

我正在閱讀一些科技新聞博客，偶然發現標題 Popover API 登陸 Baseline。我很困惑，在我最近深入前端開發期間，我最近很難習慣在 HTML 中使用 Elements。在瀏覽部落格時，我一直對到目前為止我如何使用該元素感到困惑。

長話短說

選擇對於：

• 需要使用者焦點的模態彈出視窗
• 輔助功能與鍵盤互動

選擇彈出視窗：

• 帶燈光關閉的非模態彈出視窗
• 用最少的程式碼輕鬆實現

元素

根據 MDN 的 Dialog 元素

HTML 元素表示模式或非模式對話方塊或其他互動式元件，例如可關閉的警報、檢視器或子視窗。

當網站需要吸引使用者對重要事物的注意時，通常會在內容上使用和顯示 A。即訂閱電子報、請求（更像是強制）停用廣告攔截器或接受條款和條件。

元素作為模態

由於您可能在多個網站上多次遇到過，其中一些彈出視窗將在整個螢幕上繪製，同時模糊背景或禁用背景並使用戶僅將注意力集中在手頭的任務上，用戶必須關閉（僅在允許的情況下）彈出視窗或輸入所需的資訊以使其消失。這種行為稱為「元素作為模態」。這些模態元素顯示在頁面的頂層。

//To open dialog as a modal.

dialog.showModal();

// To close the dialog.

dialog.close();

元素可以使用 esc 鍵關閉。鍵盤使用者期望這種行為需要維護並由瀏覽器提供。如果開啟了多個模式對話框，則只有最後一個對話框將使用 esc 鍵關閉。

作為非模態元素

您可能不會總是希望阻止使用者使用您的網頁的自然流程，停止執行其他所有操作並專注於您想要顯示的內容，但仍然是您的內容，例如Toast 通知、Cookie 同意或一般工具提示訊息。應出現在頁面的頂層，位於使用者可以或不能互動的任何其他內容之上。這些類型的彈出視窗稱為非模式彈出視窗。用戶可以手動關閉它們，或者通常時間會自行消失。這些非模態對話框仍然顯示在頁面的頂層，但可以使用 z-index 控制它們的優先級，並且模態元素將採用比此更高的 z-index 並使其不可存取。

//To open dialog as a modal.

dialog.show();

// To close the dialog.

dialog.close();

程式碼範例

一些問題

我很難掌握非模態元素的工作和使用。根據我的說法，非模態元素的行為不一致，需要 Javascript 程式碼來處理以下情況：

• 沒有簡單的解僱功能。點選模型外部不會關閉 .
• esc 鍵不會關閉並且需要 Javascript 來處理該場景。
• 如果你想在頂層繪製，需要手動管理z-index。

令我驚訝的是，popover API 回答或修復了這些問題以及更多......

彈出視窗API

popover 是可以加入任何 HTML 屬性中的屬性。這是一個例子。

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

popover 和

之間的主要區別元素

彈出視窗和之間的主要區別elements 的特點是彈出視窗始終是非模態的。 元素附帶一個 role=dialog 屬性，該角色屬性附加到各種 HTML 元素並以某種方式運行。即 h1 具有標題角色 a 具有錨/連結角色。此角色用於確定並幫助螢幕閱讀器等輔助技術確定元素。但是，彈出框是 HTML 元素的屬性，因為它沒有附加預設角色。這有助於

以上是Popver API VS 對話方塊模態：相同但不同的詳細內容。更多資訊請關注PHP中文網其他相關文章！