浮動介面與確認
浮在畫面上，不代表都該擋住人。
先問：使用者現在需要立刻回應嗎？背景工作必須暫停嗎？這兩個答案，會把 Dialog、Modal Dialog、Non-modal Dialog、Alert Dialog 與 Confirmation Dialog 分到不同的位置。
選擇流程
先判斷中斷程度，再選對話框名稱。
- 使用者需要立刻回應，才能安全繼續嗎？不需要：優先考慮頁面內提示或通知；不要為了醒目就跳出對話框。
- 背景內容必須暫停，避免誤操作嗎？需要：使用 Modal Dialog；背景應真正不可操作，焦點也要留在對話框內。
- 這是高風險或難以復原的動作嗎？是：使用 Confirmation Dialog，具體寫出對象、後果、取消與 Danger 動作。
- 它只是輔助資訊，使用者還要繼續看背景嗎？是：使用 Non-modal Dialog；不要加遮罩，也不要宣稱背景被鎖住。
差異對照
同樣是浮在上方，責任、焦點與風險完全不同。
點選欄位名稱可進入各元件的閱讀路徑、實際 Demo 與可複製的 AI Prompt。
| 判斷面向 | Dialog對話框 | Modal Dialog模態對話框 | Non-modal Dialog非模態對話框 | Alert Dialog警示對話框 | Confirmation Dialog確認對話框 |
|---|---|---|---|---|---|
| 背景能否操作 | 依需求決定；Dialog 是統稱，不等於一定阻斷。 | 不能。開啟後，背景內容不可意外操作。 | 可以。它是浮動的輔助面板，不是假 Modal。 | 不能。重要訊息需要先被讀取與回應。 | 不能。先確認高風險動作是否真的要做。 |
| 適合的任務 | 一段補充資訊、短任務或小型編輯。 | 完成、取消或確認後才能回到前一個任務。 | 檢視器、參考資訊、可並行使用的工具。 | 同步失敗、權限異常等需要立即處理的訊息。 | 刪除、停用、覆蓋等難以復原的操作。 |
| 焦點與鍵盤 | 開啟後應給可理解的起始焦點；關閉後回到觸發點。 | Tab 與 Shift+Tab 留在對話框內；Escape 可取消。 | 焦點可在面板與背景之間移動。 | 焦點進入訊息與回應操作；不把背景誤標為 Modal。 | 預設焦點放在取消等較安全動作；Escape 視同取消。 |
| 文案重點 | 先講清楚這塊內容要幫使用者完成什麼。 | 說明為何此刻必須暫停背景工作。 | 明確表達它是可並行工作的工具或參考區。 | 用具體原因與下一步，避免只寫「發生錯誤」。 | 說出對象、後果與是否可復原；危險動作用 Danger Token。 |
| 常見誤用 | 把所有浮動內容都稱為 Modal。 | 只因畫面看起來「高級」就阻斷整個流程。 | 加 backdrop 或 aria-modal，卻仍讓背景可操作。 | 把一般通知、成功訊息也做成強制中斷。 | 把低風險、可 Undo 的動作每次都要求二次確認。 |
示範情境
停用帳號不是「跳一個紅色彈窗」而已。
在 LumenDesk 的停用情境中，使用者需要知道停用的是誰、會造成什麼影響，以及如何安全退出。因此這裡選 Confirmation Dialog：取消先取得焦點、Escape 視同取消、背景不能被意外操作，危險動作也明確標示。
查看 Confirmation Dialog Demo →