FEEDBACK & OVERLAY
模态框Modal / Dialog
遮罩压暗全页、对话框居中弹出的重型交互。出现即垄断注意力，慎用。
效果预览
✕
确认删除这个项目？
"春季营销计划"及其下 128 个文件将被永久删除，此操作无法撤销。
适合用在哪
删除确认、支付确认、重要表单（少于 5 个字段）、升级引导。
容易踩的坑
- 弹窗打开后背景页面仍可滚动，移动端出现滚动穿透，关闭后位置错乱。
- 没有焦点锁定，Tab 键会跳到遮罩后面的链接上，键盘用户迷失位置。
- 内容超过视口高度却不让弹窗内部滚动，底部确认按钮在小屏上永远点不到。
设计提示词 · Prompt
模态框（Modal / Dialog）：遮罩 rgba(0,0,0,.45-.55) + 轻微 backdrop blur；对话框居中、宽 440-560px、圆角 16-20px、大投影（0 30px 60px -12px）。入场 scale .95→1 + 淡入 200ms，出场反向 150ms（出场要比入场快）。结构：右上角关闭 ✕ → 标题 → 描述 → 底部右侧按钮组（取消用幽灵、确认用语义色——删除类确认按钮必须是红色）。规范：Esc 可关、点遮罩可关（危险操作除外）、焦点困在弹窗内（focus trap）、关闭后焦点归还触发按钮。
Modal / Dialog: overlay rgba(0,0,0,.45-.55) + a slight backdrop blur; the dialog is centered, 440-560px wide, border radius 16-20px, large shadow (0 30px 60px -12px). Enters with scale .95→1 + fade-in 200ms, exits in reverse in 150ms (exit should be faster than entry). Structure: close ✕ at top right → title → description → button group at the bottom right (cancel as ghost, confirm in a semantic color — confirm buttons for deletion must be red). Rules: Esc closes, clicking the overlay closes (except for dangerous actions), focus is trapped inside the dialog (focus trap), and focus returns to the trigger button after closing.
常见搭配
同一页面里经常和「模态框」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-modalstage">
<div class="d-modal">
<span class="d-modal__x">✕</span>
<b>确认删除这个项目？</b>
<p>"春季营销计划"及其下 128 个文件将被永久删除，此操作无法撤销。</p>
<div class="d-modal__btns">
<button class="d-btn d-btn--ghost d-btn--sm">再想想</button>
<button class="d-btn d-btn--sm" style="background:var(--i-err);color:#fff">确认删除</button>
</div>
</div>
</div>