Modal 對話框

2022-05-10, Helen

# 標題 內容
1 Status 反饋
2 Zeplin https://zpl.io/2GP6L03
3 Ant Design hhttps://ant.design/components/modal-cn/
4 Web #
5 App #

定義

彈出的對話框。

何時使用

需要使用者特別注意目前所做的動作、提示錯誤、抑或是希望呈現某項額外資訊,又不希望跳轉頁面以至於打斷流程时,可以使用對話框。

位置

畫面正中央。

規則

應盡量避免出現一層以上的 Modal ,以降低畫面複雜度。
例如:在 Modal 上填寫資料並點擊取消時,不應該於原 Modal 上再跳出提醒彈窗。

1. 提示對話框
1. 訊息標題:必填,至多20個字元;訊息說明:選填,至多70個字元。
2. 警示:需要使用者特別注意目前所做的動作、請使用者再次確認要執行該操作。
  • 編輯頁面下方按鈕提示 (返回、確定送出等)。
  • 點選「刪除、作廢」等動作時跳出。
  • 批次動作提示。
3. 錯誤:多為點選「系統記錄」後,資訊錯誤時出現。

2. 自定義對話框

主流程中的子流程,可自由配置內容元件(輸入框、上傳、歷程資訊、詳情等),使用者在對話框內操作時,不離開當前任務,操作完成後,可離開對話框回到原任務。