最简方案是用<dialog>+原生JS，现代浏览器（Chrome 97+/Firefox 97+/Edge 97+）支持，需JS调用showModal()、设max-width/max-height/object-fit防溢出、用dialog::backdrop设遮罩，Safari 16.4前须降级为position:fixed并手动管理焦点与inert。
直接用 <dialog> + 原生 JS 是目前最简、语义最清、行为最稳的方案，但 Safari 16.4 及更早版本不支持，必须降级处理。
用 <dialog> 实现现代浏览器弹出大图
Chrome 97+、Edge 97+、Firefox 97+ 都已原生支持 <dialog>，它自带模态焦点管理、ESC 关闭、showModal() 阻塞交互等能力，不用自己手写遮罩层 z-index 或手动禁用背景点击。
- 必须用 JS 调用
myDialog.showModal()，不能靠open属性初始渲染，否则不是模态行为 -
<dialog>内部的<img>必须设max-width: 90vw; max-height: 90vh; object-fit: contain;，否则图片会拉伸或溢出视口 - 遮罩背景要靠 CSS：
dialog::backdrop { background: rgba(0,0,0,.8); }，否则看不到灰黑层 - 图片
src必须在调用showModal()前赋值，并监听load事件，否则可能闪白或显示旧图
兼容 Safari / IE 的 fallback 方案
Safari 16.4 之前不支持 <dialog>，检测不到 HTMLDialogElement 就得切到 position: fixed 手写层。关键不是“能不能显示”，而是“关不关得掉”和“点不点得穿”。
- 先判断：
if (!('showModal' in HTMLDialogElement.prototype))，再走降级逻辑 - 遮罩层必须加
inert属性（或 JS 手动document.body.setAttribute('inert', '')），否则 Safari 下背景仍可点击按钮 - 关闭时要恢复
tabindex和焦点，否则键盘用户按 ESC 后无法回到原图 - 不要用
margin-top: -Xpx居中——图片尺寸未知，必须用top: 50%; left: 50%; transform: translate(-50%, -50%)
图片 URL 来源与 data-large 的必要性
缩略图的 src 通常不是原图，直接复用会导致模糊；而硬编码大图路径又难维护。最佳实践是统一用 data-large 存高清地址。
立即学习“前端免费学习笔记（深入）”；
- 写法：
<img src="thumb.jpg" data-large="full.jpg" alt="描述"> - JS 中取值：
img.dataset.large || img.src，提供兜底 - 避免在 JS 里拼接路径（如
img.src.replace('thumb', 'full')），容易出错且不灵活 - 如果大图在 CDN 或不同域名，确保 CORS 头允许加载（影响
<img>渲染，不影响跳转）
真正容易被忽略的是图片加载完成前就调用 showModal() —— 这会导致空图、占位符闪现，或者 offsetWidth 计算错误进而影响居中。所有基于尺寸的操作（比如动态设置 max-height）都必须等 img.onload 触发后再执行。
