布局与交互

模态框 Modal

背景变暗后在屏幕中央弹出的对话框,强制用户先处理完当前任务

**模态框(Modal,模态对话框)**把背景压暗,在屏幕中央弹出一个必须先处理的对话框:不点确认或取消,别的操作都进不去。“模态”就是这个意思——它给系统加了一个临时的“模式”。

什么时候用:危险操作确认(删除、支付)、必须完整填完的短表单、重要告知。它是打断式设计,能少用就少用——日常反馈交给 toast,浏览交给抽屉,别什么都弹窗。

对 AI 说清楚的三要素:① 遮罩半透明(0.4~0.6)+ 点击关闭策略要明确;② 弹窗动画 0.2s 左右缩放淡入,别超过 0.3s;③ 焦点圈定(Tab 出不去)+ Esc 关闭,这是可访问性底线。

复制即用的提示词片段

危险操作确认用模态框(Modal):背景加半透明遮罩并模糊,
中央弹出对话框(标题 + 说明 + [取消][确认] 按钮组);
入场 0.2s 缩放淡入;点遮罩或 Esc 可关闭,确认按钮用危险色。