alert() 最简但不可用，因阻塞执行、无样式、被拦截；推荐用原生 dialog 元素或 CSS 动画+aria-live 实现不打断、可访问的风险提示。

怎么用 alert() 实现最简风险提示，但为什么不该用

直接弹窗提醒延期或超预算，alert() 最快，但实际项目里基本不能用——它会阻塞 JS 执行、打断用户操作、无法自定义样式、不支持关闭动画，移动端还常被浏览器拦截。

• 适用场景仅限调试或内部工具的临时兜底，上线前必须替换
• alert() 无返回值，调用后代码暂停，后续逻辑（如日志上报、状态更新）全卡住
• 部分 iOS Safari 和 Chrome 隐私模式下，连续触发会静默丢弃，警告根本不出现在用户眼前

用原生 dialog 元素做轻量级预警框（现代浏览器）

HTML5 原生 dialog 是目前最干净的方案：语义正确、可聚焦、支持 showModal()、能用 CSS 控制样式，且不依赖 JS 库。

• 必须用
  标签包裹内容，且需手动调用 showModal() 或 show() 才显示
• 关闭时推荐监听 close 事件而非点击遮罩，因为默认点击遮罩不关闭（需显式设置 clickOutsideToClose 类似行为要自己写）
• IE 完全不支持，Edge 79+、Chrome 37+、Firefox 98+ 支持；旧项目需加 dialog-polyfill

<dialog id="risk-alert"><p>⚠️ 项目已延期 5 天，预算超支 12%</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="overflowclass">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
													<p class="overflowclass">使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  <button onclick="this.closest('dialog').close()">我知道了</button>
</dialog><script>document.getElementById('risk-alert').showModal()</script>

Vue/React 项目里怎么避免重复渲染预警框

风险提示不是一次性弹出就完事，它得随数据实时响应：比如预算字段变化、计划日期更新，都可能触发新预警。但频繁重绘 dialog 或 Modal 组件容易导致 DOM 闪动、焦点丢失、甚至内存泄漏。

• 在 Vue 中用 v-if 而非 v-show 控制显示，确保销毁时清空定时器和事件监听
• React 中若用 useState 控制开关，注意不要在 effect 里无条件 set，否则形成死循环；建议加防抖或比对前后风险等级（如从“正常”→“高危”才触发）
• 所有预警逻辑应抽离为独立 hook / composable，把判断条件（如 daysLate > 3 || costOverrun > 0.1）和 UI 渲染解耦

为什么 CSS 动画 + aria-live 比弹窗更可靠

有些团队发现：用户根本没点“我知道了”，或者弹窗刚出来就被切走，结果风险提示形同虚设。这时候视觉强提示 + 无障碍播报反而更有效。

• 在顶部固定栏加一个
  ，用 CSS animation 实现缓慢滑入+轻微抖动，比弹窗更难忽略
• 配合 aria-live="assertive" 和动态插入的 文本，屏幕阅读器会立即朗读，覆盖所有残障用户场景
• 不阻塞交互，不影响页面滚动和表单输入，适合高频刷新的项目看板页
• 关键点：必须用 role="alert" 或 aria-live，纯 CSS 动画对无障碍用户完全不可见

真实项目里最麻烦的不是做出来，是让预警“刚好出现、不打扰、不遗漏”。比如成本计算延迟 200ms，预警就可能比实际数据早 1 秒弹出；又比如多标签页切换时，dialog 的 focus 状态容易丢失，导致按 Esc 关不掉。这些细节不压测几轮根本发现不了。