推荐用 <dialog> 实现现代轻量弹窗，Chrome 98+、Firefox 97+、Safari 15.4+ 原生支持，自动处理焦点、Esc 关闭和无障碍；需用 .showModal() 触发，配合 dialog::backdrop 样式及尺寸限制，并兼容旧浏览器的 fixed 方案与移动端适配。
用 <dialog> 实现现代轻量弹窗（推荐）
Chrome 98+、Firefox 97+、Safari 15.4+ 原生支持，不用手写遮罩层、自动处理焦点和 Esc 关闭，语义正确且无障碍友好。
关键点：
-
<dialog>必须用.showModal()触发，不能靠open属性初始显示，否则不模态 - 遮罩样式必须加
dialog::backdrop { background: rgba(0,0,0,.8); }，否则看不见背景 - 图片要设
max-width: 90vw; max-height: 80vh; object-fit: contain;，避免拉伸或溢出 - 缩略图建议用
data-fullsrc存高清地址，弹窗中优先读取：img.dataset.fullsrc || img.src
兼容旧浏览器的手写 fixed 弹窗
IE11 或旧版 Safari 不支持 <dialog>，得用 position: fixed 模拟，但容易踩坑。
常见错误现象：click 事件绑在 img 上却无法关闭、图片居中失效、滚动条残留、重复插入 DOM 导致内存泄漏。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操要点：
- 弹窗结构必须含遮罩层：
<div class="overlay"><img class="preview-img"></div>，不能只插一个<img> - 居中用
top: 50%; left: 50%; transform: translate(-50%, -50%);，别用固定margin-top—— 图片尺寸未知时必错 - 关闭逻辑绑定在遮罩层上，
event.target === overlayEl才触发移除，防止点图片本身也关闭 - 关闭时务必调用
overlayEl.remove()，不是style.display = 'none'，否则节点越积越多 - 打开后加
document.body.style.overflow = 'hidden'，关闭后还原，否则滚动条卡住
移动端双击/触摸适配要点
iOS Safari 默认双击放大图片，会干扰弹窗；安卓部分浏览器有 300ms click 延迟；滑动时还可能误触关闭。
必须处理的细节：
- 同时监听
click和touchstart，并在回调里调用event.preventDefault() - 弹窗中的
<img>加style="pointer-events: none;"，禁用系统双击缩放 - 遮罩层加
touch-action: none;，避免手势冲突 - 若页面已设
user-scalable=no，可省略touch-action，但多数情况仍需显式设置
路径与加载可靠性问题
缩略图用相对路径，弹窗里直接读 img.src 很可能 404 —— 因为相对路径是相对于当前 HTML 页面，而弹窗 DOM 插入后上下文没变，但用户可能从子目录访问。
安全做法：
- 服务端返回绝对 URL 最稳妥；前端兜底用
new URL(img.src, location.href).href补全路径 - 不要依赖
loading="lazy"的src，懒加载图片点击时可能还没加载完成，弹窗里显示空白 - 动态插入图片后，等
img.onload触发再显示弹窗，或加 loading 占位符，避免闪烁 - 避免把原图地址塞进
alt或title—— 语义错误，且内容过长会被截断
