优先用原生dialog，但需确认浏览器支持showModal()（Safari 15.4+、Chrome 97+、Firefox 99+），否则退至div+fixed方案；必须实现焦点囚禁、Esc关闭、遮罩校验及aria-modal等可访问性属性。
弹窗多步骤流程该用 dialog 还是手写 div？
优先用原生 dialog，但必须确认目标浏览器支持 showModal() —— Safari 15.4+、Chrome 97+、Firefox 99+ 稳定可用；若需兼容 IE 或旧版 Safari，只能退回到 div + position: fixed 方案。
别为了“语义正确”硬上 dialog 却不处理 fallback：比如在不支持的浏览器里直接降级为 display: none 而不加遮罩层，会导致背景可点击、键盘焦点乱跳。
-
dialog自带模态行为（Esc关闭、焦点囚禁），但外部点击不自动关闭，得手动监听close事件并判断dialog.returnValue - 手写
div需自行实现焦点囚禁（focusin拦截 +tabindex="-1"）、Esc监听、遮罩层点击穿透检测 - 两者都必须加
aria-modal="true"和role="dialog"，否则屏幕阅读器无法识别模态上下文
多步骤状态怎么和弹窗 DOM 同步？
步骤状态不能只靠 DOM class 切换（比如 step-2 active），而应由单一 JS 对象驱动，DOM 只是视图映射。否则用户跳步（如从 step 4 点回 step 2）时，class 可能残留或错位。
推荐结构：const flowState = { currentStep: 2, visitedSteps: new Set([1, 2, 4]), data: { step1: {}, step2: {} } }，每次切换前校验 visitedSteps.has(nextStep) 再更新。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 每步内容区用
data-step="2"标记，切换时只显示匹配项，避免用nth-child硬算位置 - 返回按钮的禁用逻辑绑定到
flowState.currentStep和flowState.visitedSteps.size，不是简单step > 1 - 步骤标题栏用
aria-current="step"标注当前步，辅助技术可感知
怎么防止用户点遮罩层意外退出整个流程？
遮罩层（.modal-overlay 或 dialog::backdrop）点击默认应关闭弹窗，但多步骤流程中，用户可能只是想移开鼠标——尤其在表单未填完时，直接关闭等于丢数据。
正确做法：遮罩层点击只关闭弹窗，**但前提是当前步已通过 validateCurrentStep()**；否则弹提示“请先完成当前步骤”，不跳转也不清空。
- 不要在遮罩层上写
onclick="closeDialog()"，统一走overlay.addEventListener('click', handleOverlayClick) - 检测点击目标是否在弹窗内容内：
e.target.closest('.dialog-content') === null，而非e.target === overlay - 对
dialog元素，监听close事件后检查dialog.returnValue === ''（外部点击触发）再决定是否拦截
移动端触摸反馈和防误触怎么做？
手指点击区域小、响应慢，连续点两次返回按钮会触发两次回退——这不是 bug，是没加防抖和视觉反馈。
给返回按钮加 :active 样式（比如背景变深），并在 JS 中用 setTimeout 延迟 300ms 再执行跳转逻辑，期间禁用按钮（button.disabled = true），完成后恢复。
- 禁用时保留
tabindex="0"和aria-disabled="true"，保证键盘用户知道按钮不可用，而不是消失 - 别用
pointer-events: none，它会让title提示、调试点击监听全部失效 - 安卓 WebView 或 iOS UIWebView 中，
dialog的showModal()可能卡顿，建议降级为show()+ 手动管理焦点
