Angular Material 17+ 高階教程 – Overlay

Overlay, Dialog, Modal, Popover 傻傻分不清楚

參考：

Medium – Modal？Dialog？你真的知道他們是什麼嗎？

Popups, dialogs, tooltips, and popovers— UX Patterns #2

掘金 – 對話方塊、模態框和彈出框看起來很相似，它們有何不同？

傻傻分不清楚是正常的，因為市場上並沒有統一的規範。

我個人的理解是這樣：

1. Overlay

   Overlay 的意思是覆蓋，但凡有一個東西覆蓋在另一個東西之上，都可以抽象理解為 Overlay。

   用於 HTML 的話，只要是 position 定位覆蓋在 body / 任何 element 之上，都是 Overlay。

2. Dialog

   Material Design 對 Dialog 有明確的定義，Dialog 是一個覆蓋在 body 之上的 Overlay，它會強制要求使用者與之互動，不然 Dialog 就會一直遮擋在 body 之上。

3. Modal

   HTML 對 Dialog 的定義和 Material Design 不同，HTMLDialogElement 有 2 個顯示方法，一個是 show 一個是 showModal。

   show 只是普通的顯示在 body 裡，showModal 才是像 Material Dialog 那樣以 Overlay 形式顯示。

   所以對我來說 HTML Modal 和 Material Dialog 是一樣的東西，但 HTML Dialog 和 Material Dialog 則是不同的。

4. Popover

   Popover 也是一種 Overlay，但是它不像 Dialog 那樣搶眼，也不那麼強制互動。

   Dialog 通常顯示在螢幕的正中間大大個，Popover 則出現在 trigger 它的 element 附近小小個。

   Dialog 通常會有一層全屏的黑影 (backdrop) 遮擋住後面 body 的內容，而 Popover 通常是沒有 backdrop 的。

除了 Dialog，Modal，Popover 以外，其實還有很多的 Overlay，比如說 Snackbar。

但無論如何，本篇主講是 Overlay，所以我們也不需要分的太清楚先，反正大家都是 Overlay 嘛。

Overlay

目錄

上一篇 Angular Material 17+ 高階教程 – CDK Accessibility の ListKeyManager

下一篇 TODO

想檢視目錄，請移步 Angular 17+ 高階教程 – 目錄