现代浏览器可用原生 <dialog> 实现轻量可靠图片预览，需动态加载原图、限制容器尺寸、处理滚动穿透与焦点管理，旧浏览器降级为简单 div 模态框。
点击图片触发原图预览，用 HTMLDialogElement 最轻量可靠
现代浏览器（Chrome 98+、Edge 98+、Firefox 111+）已原生支持 <dialog>，无需任何 JS 库就能实现模态预览。比手写 position: fixed + z-index 堆叠更稳定，也避免了焦点管理、ESC 关闭、点击遮罩关闭等重复逻辑。
关键点：
-
<dialog>默认不渲染在 DOM 主流中，调用showModal()才激活，天然隔离样式干扰 - 图片用
<img>的srcset和sizes属性控制高清源，避免预览时拉伸模糊 - 不要给
<dialog>设固定宽高，让图片按原始比例撑开容器，再用max-width: 90vw; max-height: 90vh;限制边界 - 移动端需加
touch-action: pan-x pan-y;防止手势冲突
img 的 data-fullsrc 属性怎么选：不是所有“大图”都该加载
直接把原图地址塞进 data-fullsrc 是常见错误。用户没点开前，不该提前请求几 MB 的高清图。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 缩略图用 WebP 格式 +
loading="lazy"，width/height显式声明防布局抖动 - 原图地址存在
data-fullsrc，但只在click后才创建new Image().src = fullsrc触发加载，失败时 fallback 到缩略图 - 若原图带 CDN 参数（如
?x-oss-process=image/resize,w_2000），确保该 URL 可直接访问且无鉴权，否则预览会 403 - 服务端返回的 JSON 中若含多个尺寸（
thumb/medium/original），优先取original；没有就退到medium并标注 “非原始尺寸”
滚动穿透和键盘焦点：不处理就会卡住用户
打开预览后页面还能滚？按 Tab 键焦点跑到背景里？这是 <dialog> 未接管焦点链的典型表现。
必须补两处：
- 打开前用
document.body.style.overflow = 'hidden';锁定背景滚动（关闭时记得还原） - 预览弹出后，立即
dialogEl.focus();，并在<img>上监听keydown，捕获Escape和ArrowLeft/ArrowRight（用于多图轮播） - 如果预览框内有按钮（如下载、关闭 X），确保它们能被 Tab 访问，且顺序合理——关闭按钮应是第一个可聚焦元素
- 不要依赖
autofocus属性，它在<dialog>中行为不稳定
IE 和旧 Safari 怎么办：降级方案只做必要兜底
真要兼容 IE11 或 Safari ≤ 15.6，别硬套 <dialog> polyfill（体积大、bug 多）。直接用最小闭环方案：
- 检测
HTMLDialogElement是否存在，不存在则动态插入一个<div class="fallback-dialog"> - 这个 div 仅包含
<img>和一个绝对定位的关闭按钮，CSS 用transform: scale(1)+transition模拟淡入 - 禁用背景滚动改用
position: fixed; top: 0;锁死html元素（注意 iOS Safari 的fixedbug，得加min-height: 100vh;） - 不实现键盘导航或焦点管理——老浏览器用户对这些交互预期本来就不高
复杂点在于多图切换时的内存释放：每次关闭预览，务必 revokeObjectURL（如果用了 createObjectURL）或清空 src，否则 Chrome 下连续点 10 张图可能触发内存警告。
