用途:为对话框、确认框、侧边面板和操作表等浮层选择合适类型,避免不必要的打断,保持用户方向感。
核心原则:按覆盖层级选择最轻的浮层。可继续使用其余界面时用非阻断型(tooltip、popover、下拉菜单、底部抽屉、侧边抽屉);必须等待用户响应时才用模态框。
各类模式:Tooltip 悬停或键盘聚焦出现,仅说明文字,不含交互元素,延迟 300–400ms,配 role="tooltip" 与 aria-describedby;Popover 锚定触发器但含交互内容,宽度 280–360px,支持点击外部、Escape 或关闭按钮关闭;下拉菜单用于选项或操作,键盘用方向键与 Enter;移动端底部抽屉替代模态框,支持下滑与点遮罩关闭;侧边抽屉宽 320–480px,桌面常用右侧,配半透明遮罩;模态框用全屏遮罩阻断界面,仅用于破坏性确认、必填表单或必须确认的错误警告;灯箱/媒体查看器按指针类型区分交互,保留 +/− 按钮与键盘路径,显示缩放光标并暴露当前缩放比例。
关键限制与规则:破坏性操作禁用 Escape 与点击遮罩关闭,必须显式取消或确认;避免模态框嵌套模态框;不要围绕 beforeunload 设计自定义流程;打开时聚焦移入浮层并锁定,关闭时返回触发元素;容器配 role="dialog"、aria-modal="true"、aria-labelledby 等;确认框需写明操作对象与后果,破坏性按钮用明确标签与错误色;移动端避免居中小模态框。
资料未提供该技能的安装命令、代码示例与具体运行环境。