必须手写遮罩层+js控制dom插入/移除才能兼容所有浏览器，因旧版safari不支持，纯html/css无法实现遮罩、居中、esc关闭等交互，且存在图片加载、路径、内存泄漏等关键问题。
直接用 <dialog></dialog> 最省事，但 Safari 旧版本不支持；真要兼容所有浏览器，必须手写遮罩层 + JS 控制 DOM 插入/移除，否则点不开、关不掉、大图溢出或内存泄漏。
为什么不能只靠 CSS 或纯 HTML 实现
纯 HTML 的 <img> 标签加 onclick 内联脚本，最多只能跳转新页或 window.open()，做不到遮罩、居中、Esc 关闭、点击空白关闭这些交互。CSS 本身没有“监听点击”能力，display: none / visibility: hidden 也不能动态加载图片内容。常见错误是把遮罩层写死在 HTML 里并用 style.display = 'block' 切换——这会导致多个缩略图共用一个 <img>，点第二张时仍显示第一张的 src。
用 <dialog></dialog> 快速实现（现代浏览器优先）
这是目前最干净的原生方案，不用手动管事件绑定和节点清理：
-
<dialog></dialog>必须用 JS 调用.showModal()才真正模态；设open属性只会让它初始可见，但不阻断背景交互 - 遮罩样式靠
dialog::backdrop控制，不加这句就看不到灰黑背景 - 大图
<img>的src必须在 JS 中动态赋值，不能写死在 HTML 里，否则所有弹窗都显示同一张图 - 移动端需额外加
touchstart监听，并在<img>上设style="max-width:90%"防止双击缩放
示例关键片段：
@@##@@ <dialog id="img-dialog"> @@##@@ </dialog>
JS 中：
document.querySelectorAll('.zoomable').forEach(img => {
img.addEventListener('click', () => {
const fullSrc = img.dataset.fullsrc || img.src;
document.getElementById('dialog-img').src = fullSrc;
document.getElementById('img-dialog').showModal();
});
});
手写遮罩层的必填细节（兼容 IE11 / 旧 Safari）
核心不是“怎么显示”，而是“怎么安全插入、正确居中、彻底清理”：
- 遮罩层结构必须含两层：
<div class="overlay">（固定定位 + <code>z-index: 9999+background: rgba(0,0,0,.8)）包裹<div class="modal-content"><img src="thumb.jpg" data-fullsrc="full.jpg" class="zoomable"></div> - 居中不能靠
margin: auto，得用top: 50%; left: 50%; transform: translate(-50%, -50%)，且计算前要减去pageXOffset/pageYOffset，否则滚动后位置偏移 - 大图加载完成前别读
offsetWidth，要用naturalWidth/naturalHeight，否则返回 0；加载完再设opacity: 1配合 CSS 过渡淡入 - 关闭时必须：清空
.modal-content.src、置空onload回调、移除整个.overlay节点（不是display: none），否则重复点击会叠加多个遮罩层 - 移动端要同时监听
click和touchstart，并在事件回调里加event.preventDefault()阻止默认行为 - 服务端尽量返回绝对 URL（如
https://cdn.example.com/full/cat.jpg） - 前端补全路径用
new URL(src, location.href).href，别用字符串拼接 - 懒加载图片（
loading="lazy"）的src可能为空，此时必须 fallback 到data-fullsrc - 不要用
event.currentTarget.src—— 它可能已被 JS 修改过；始终用event.target.src或显式存的dataset.fullsrc
路径和资源加载最容易被忽略的坑
缩略图用相对路径 ./images/cat-thumb.jpg，弹窗里直接塞进去，大概率 404。原因：弹窗 <img src="" alt="" id="dialog-img"> 的 base URL 是当前页面地址，不是缩略图所在目录。
真正的难点不在“怎么让图出来”，而在“怎么让它出来时不闪、居中不偏、关完不留痕、换设备不崩”。每一步漏掉，用户点一次就卡半秒或白屏。
