alert() 最简但不可用，因阻塞执行、无样式、被拦截；推荐用原生 dialog 元素或 CSS 动画+aria-live 实现不打断、可访问的风险提示。
怎么用 alert() 实现最简风险提示，但为什么不该用
直接弹窗提醒延期或超预算，alert() 最快，但实际项目里基本不能用——它会阻塞 JS 执行、打断用户操作、无法自定义样式、不支持关闭动画，移动端还常被浏览器拦截。
- 适用场景仅限调试或内部工具的临时兜底，上线前必须替换
-
alert()无返回值，调用后代码暂停，后续逻辑（如日志上报、状态更新）全卡住 - 部分 iOS Safari 和 Chrome 隐私模式下，连续触发会静默丢弃，警告根本不出现在用户眼前
用原生 dialog 元素做轻量级预警框（现代浏览器）
HTML5 原生 dialog 是目前最干净的方案：语义正确、可聚焦、支持 showModal()、能用 CSS 控制样式，且不依赖 JS 库。
- 必须用
<dialog></dialog>标签包裹内容，且需手动调用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">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" 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 比弹窗更可靠
有些团队发现：用户根本没点“我知道了”，或者弹窗刚出来就被切走，结果风险提示形同虚设。这时候视觉强提示 + 无障碍播报反而更有效。
- 在顶部固定栏加一个
<div class="risk-banner">，用 CSS <code>animation实现缓慢滑入+轻微抖动，比弹窗更难忽略 - 配合
aria-live="assertive"和动态插入的<span></span>文本，屏幕阅读器会立即朗读，覆盖所有残障用户场景 - 不阻塞交互，不影响页面滚动和表单输入，适合高频刷新的项目看板页
- 关键点：必须用
role="alert"或aria-live，纯 CSS 动画对无障碍用户完全不可见
真实项目里最麻烦的不是做出来，是让预警“刚好出现、不打扰、不遗漏”。比如成本计算延迟 200ms，预警就可能比实际数据早 1 秒弹出；又比如多标签页切换时，
dialog 的 focus 状态容易丢失，导致按 Esc 关不掉。这些细节不压测几轮根本发现不了。
