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();

使用 showModal() 方法顯示的

元素可以使用 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 元素的屬性，因為它沒有附加預設角色。這有助於

在上面的範例中要隱藏，直到單擊按鈕。

popover 屬性可以用最少的程式碼來使用，雖然它可以使用 Javascript 來控制，但並不像

那樣總是需要。

popover boleh mempunyai 2 ciri:
1.popover=auto: Mempunyai fungsi untuk pemecatan ringan dan tidak memerlukan interaksi JS.
2.popover=manual: Memerlukan interaksi Javascript seperti mengklik butang atau pemasa untuk menutupnya secara eksplisit.

popover sentiasa ditunjukkan di lapisan atas tidak perlu menetapkan indeks-z secara eksplisit.

Contoh Kod:

Anda boleh lihat saya boleh mencapai kelakuan yang sama dengan hampir tiada kod Javascript. Mereka bentuk dan mengurus pelbagai popover adalah lebih mudah.

Beberapa pertimbangan Reka bentuk

popover boleh mempunyai : set tirai latar menggunakan CSS yang boleh digunakan untuk mengaburkan atau mengaburkan latar belakang popover tetapi itu tidak menghilangkan fungsi penyingkiran cahaya itu, dan pengguna masih boleh mengklik di luar jika pop- dan berinteraksi dengan elemen lain halaman web anda. Anda harus berhati-hati semasa menentukan masa untuk memilih popover atas

.

Perkara utama yang perlu dipertimbangkan di sini ialah: adakah komponen yang dipaparkan satu-satunya perkara yang sepatutnya mempunyai fokus pada masa ini? bolehkah pengguna dibenarkan berinteraksi dengan perkara lain?

Kesimpulan

Kesimpulannya, elemen dan API popover menawarkan pilihan serba boleh untuk mencipta pop timbul interaktif dalam aplikasi web anda. Dengan memahami ciri tersendiri dan kes penggunaannya, anda boleh membuat keputusan termaklum untuk meningkatkan pengalaman pengguna dan menyelaraskan proses pembangunan anda.

Rujukan

1. Membandingkan API Popover dan elemen
2. Dialog dan popover kelihatan serupa. Bagaimanakah mereka berbeza?
3. API Popover mendarat di Baseline

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