应使用CSS+JS模态框替代原生弹窗，因其支持自定义样式、不阻塞JS、适配移动端，并需确保可访问性（焦点控制、ARIA属性）、正确定位（fixed）、遮罩层覆盖及合理显隐策略（v-if/v-show）。
直接用 confirm() 或 alert() 就够了？别急，先看场景
浏览器原生弹窗（alert、confirm、prompt）确实一行代码就能调起，但它们会阻塞 JS 执行、无法自定义样式、在移动端体验差，且现代项目里基本被禁用——比如 Vue/React 组件中调用 confirm() 会被 ESLint 报 no-alert 警告。真要交互反馈，90% 的情况该用 CSS + JS 实现的模态框（modal），而不是依赖原生弹窗。
display: none 切换就够？关键在「可访问性」和「焦点控制」
只靠 display: block / none 显示隐藏一个 <div> 是最简实现，但会立刻踩中三个坑：键盘用户按 Tab 键能跳进弹窗背后的页面元素、屏幕阅读器可能读不到弹窗内容、ESC 键或点击遮罩层不自动关闭。必须补全这些：
- 弹窗显示时，给
<body>加overflow: hidden防止背景滚动 - 弹窗容器设
role="dialog"，标题加aria-labelledby指向对应<h2>ID - 打开后用
focus()主动聚焦到第一个可交互元素（如确认按钮），关闭后恢复上一个聚焦元素 - 监听
Escape键和遮罩层点击，但注意：只关闭弹窗，不阻止事件冒泡到内部按钮
用 position: fixed 还是 position: absolute？看是否需要滚动跟随
模态框必须脱离文档流，但两者行为差异明显：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
position: fixed：相对于视口定位，滚动页面时弹窗不动——这是模态框的标准做法，遮罩层也必须用它，否则遮不住全屏 -
position: absolute：相对于最近的position: relative祖先定位，滚动时会跟着动，容易漏掉底部内容，仅适合嵌入式浮层（如表格内操作菜单） - 遮罩层（backdrop）务必设
inset: 0或top: 0; left: 0; width: 100%; height: 100%，并确保z-index高于所有页面内容（建议 ≥ 1000）
Vue/React 里用 v-if 还是 v-show？性能和过渡动画怎么选
框架中控制显隐，核心区别不在语法而在渲染时机：
立即学习“前端免费学习笔记（深入）”；
-
v-if（Vue）或条件渲染（React）：组件真正销毁/重建，适合复杂弹窗（含表单、图表），避免内存泄漏；但首次打开有轻微延迟 -
v-show（Vue）或style={{ display: visible ? 'block' : 'none' }}（React）：只是切display，DOM 一直存在，适合极轻量提示（如“保存成功”），开销小 - 加淡入动画？别只写
opacity，必须配合transition和pointer-events: none在隐藏时禁用交互，否则用户可能点到半透明状态下的按钮 - 真实项目建议封装成独立组件，把
onConfirm、onCancel、title、content全部作为 prop 传入，避免到处写重复逻辑
最常被忽略的是 backdrop 的点击穿透问题：如果弹窗内容区用了 pointer-events: none（比如想让点击穿透到下层地图），那整个弹窗区域就收不到点击事件了——得单独给按钮加 pointer-events: auto，而不是一刀切。
