应优先使用原生元素实现模态框，因其内置语义、焦点管理与自动背景禁用，可避免手写modal时的重复绑定、资源残留及滚动穿透问题；data-large-src必须显式提供高清图地址，图片在dialog中需用max-width/max-height与object-fit: contain安全展示，并通过opacity过渡优化加载体验。
直接用 <dialog></dialog> 是最省事也最可靠的方式，现代浏览器（Chrome 97+、Firefox 99+、Safari 15.4+）原生支持，不用手写遮罩层、不用防重复绑定、ESC 键和点击外部自动关闭全由浏览器接管。
为什么不用自己写 modal？
手写 #imageModal 容易踩三个坑：一是多次点击缩略图会重复 addEventListener，导致关一次弹窗要连点好几下；二是没清空 .modal-content.src，下次打开还是旧图；三是没锁 body { overflow: hidden }，弹出后页面还能滚动，视觉割裂。而 <dialog></dialog> 内置模态语义、焦点管理、showModal() 自动禁用背景交互，天然规避这些。
data-large-src 必须存在，不能只靠 src
缩略图的 src 是小图，大图 URL 得单独存——否则页面一加载就拉取几 MB 高清图，首屏性能直接崩。正确写法是：
@@##@@
-
data-large-src是唯一可信来源，JS 只读它，不拼接路径、不 fallback 到src - 别用
data-src或data-big，语义不清，团队协作时容易误读 - 如果广告图来自 CMS，确保模板里显式输出
data-large-src，而不是靠 JS 猜路径
dialog 里图片必须加 max-width/max-height
直接设 width: 100vw 会撑破视口（尤其竖构图），且忽略滚动条宽度，导致水平滚动条意外出现。安全写法是：
dialog::backdrop { background: rgba(0,0,0,0.85); }
#zoom-dialog img {
max-width: 90vw;
max-height: 80vh;
object-fit: contain;
margin: 2vmax;
display: block;
}
-
vmax比%更稳：横屏手机取宽，竖屏取高，避免图过小 -
object-fit: contain保证完整显示，不裁剪不拉伸 - 千万别写
width: 100%; height: 100%——这会让小图强行填满，像素糊成一片
移动端 click 不可靠，但别硬上 touchstart
iOS Safari 和安卓 Chrome 对 click 有 300ms 延迟，但用 touchstart 模拟点击会破坏原生长按菜单（保存/分享），还容易误触。真实可行的做法只有两个：
- 给
<img src="thumb.jpg" data-large-src="large.jpg" class="ad-image" alt="广告图">加cursor: pointer和user-select: none，提升点击反馈感 - 在 CSS 里加
@media (hover: hover) { .ad-image:hover { opacity: 0.95; } }，仅对支持悬停的设备生效 - 放弃双击放大——现代移动浏览器基本禁了
user-scalable=yes，硬做等于白费
真正该花时间的是把 showModal() 后的图片加载流程做顺：先设 opacity: 0，等 onload 触发再 opacity: 1，配合 transition: opacity 0.2s，比任何“酷炫缩放”都更让人觉得快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
