可用原生<dialog>实现轻量图片放大弹窗，现代浏览器推荐；旧版需fixed定位模拟，并注意data-fullsrc、touch-action等细节以保障清晰度与手势支持。
直接用原生 HTML + 少量 CSS + 一点点 JavaScript 就能实现轻量、无依赖的图片点击放大弹窗，不需要引入 Lightbox、Fancybox 这类库——尤其适合静态页、博客或不想加载额外 JS 的场景。
用 <dialog> 实现语义化弹窗（现代浏览器首选）
<dialog> 是原生弹窗元素，自带模态行为和焦点管理，比手写 div + display: none 更可靠。但注意：Safari 15.4+、Chrome 98+、Firefox 97+ 才完全支持，旧版需降级。
- 把图片包裹进
<dialog>，用showModal()触发显示 - 点击遮罩或按
Esc自动关闭，无需手动监听 - 必须用 JS 调用
showModal()，不能靠open属性初始打开（否则不模态） - 样式上记得加
dialog::backdrop { background: rgba(0,0,0,.8); }，否则遮罩不可见
<img src="cat.jpg" alt="猫" class="zoomable">
<dialog id="img-dialog">
<img src="" alt="" id="dialog-img">
</dialog>
<script>
document.querySelectorAll('.zoomable').forEach(img => {
img.addEventListener('click', () => {
const dialog = document.getElementById('img-dialog');
const dialogImg = document.getElementById('dialog-img');
dialogImg.src = img.src;
dialogImg.alt = img.alt;
dialog.showModal(); // 关键：必须调用方法
});
});
</script>
兼容老浏览器：用 position: fixed 手写弹窗
当要支持 IE11 或旧版 Safari 时，<dialog> 不可用，得用 fixed 定位 + z-index 模拟。核心难点是“点击外部关闭”和“图片居中适配”。
- 弹窗容器设
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; - 图片用
max-width: 90vw; max-height: 90vh; margin: auto;居中并防溢出 - 监听
click事件时，检查event.target === dialogEl才关闭（避免点图片本身也关闭） - 务必加
tabindex="-1"到弹窗容器，并在打开后.focus()，否则键盘用户无法用Esc关闭
img 标签的 srcset 和 sizes 在弹窗里容易失效
原图缩略图用 srcset 是好习惯，但弹窗里直接复用缩略图的 src，会导致高清屏下模糊。别偷懒传 img.src。
立即学习“前端免费学习笔记（深入）”；
- 给缩略图加
data-fullsrc属性存大图地址：<img src="cat-thumb.jpg" data-fullsrc="cat-2x.jpg" ...> - 弹窗中优先读
dataset.fullsrc， fallback 到src - 如果大图带响应式，可在
data-fullsrc存 JSON 字符串，如{"src": "cat-1200.jpg", "w": "1200"}，再解析使用
移动端双击放大、拖拽、缩放手势需要额外处理
原生 <dialog> 或 fixed 弹窗默认不支持手势缩放，<img> 在 <dialog> 内也无法双指缩放（iOS Safari 会阻止）。
- 必须给弹窗内图片加
style="touch-action: manipulation;"，否则 iOS 阻止缩放 - 双击放大需自己监听
dblclick并切换transform: scale()，注意重置 transform-origin - 拖拽移动建议用
pointerdown/move/up+translateX/Y，避免影响页面滚动 - 慎用
viewportmeta 的user-scalable=no，它会全局禁用缩放，包括弹窗
真正难的不是“怎么弹出来”，而是“怎么让图片在各种尺寸、DPR、手势下都清晰可操作”。多数人卡在没处理 data-fullsrc 和 touch-action，结果在 iPhone 上点开一片糊，还关不掉。
