原生 <dialog> 是最轻量可靠的现代方案，Chrome 97+、Firefox 98+、Safari 15.4+ 原生支持，点击放大、遮罩关闭、Esc 关闭均无需 JS 库，配合 showModal()、role="dialog"、aria-modal="true" 及 iOS 专用 CSS 修复滚动与 backdrop 问题即可。
用 click 事件 + dialog 元素最轻量可靠
现代浏览器（Chrome 97+、Firefox 98+、Safari 15.4+）原生支持 <dialog>，无需 JS 库就能实现点击放大、点击遮罩关闭、按 Esc 关闭。比手动操作 z-index 和 transform 更稳定，也避免了 position: fixed 在 iOS Safari 中的滚动错位问题。
关键点：
-
<dialog>默认不显示，必须调用.showModal() - 图片需设为
max-width: 90vw; max-height: 90vh;防止溢出 - 必须给
<dialog>加role="dialog"和aria-modal="true"以满足可访问性
<img src="photo.jpg" alt="风景" class="zoomable">
<dialog id="image-dialog" role="dialog" aria-modal="true">
<img id="dialog-img" src="" alt="" style="max-width: 90vw; max-height: 90vh;">
<button id="close-btn">×</button>
</dialog>
<script>
const img = document.querySelector('.zoomable');
const dialog = document.getElementById('image-dialog');
const dialogImg = document.getElementById('dialog-img');
const closeBtn = document.getElementById('close-btn');
img.addEventListener('click', () => {
dialogImg.src = img.src;
dialogImg.alt = img.alt;
dialog.showModal();
});
closeBtn.addEventListener('click', () => dialog.close());
dialog.addEventListener('click', (e) => {
if (e.target === dialog) dialog.close();
});
</script>
iOS Safari 下 dialog 不触发或背景不锁定？加这两行 CSS
iOS Safari 对 <dialog> 的实现有延迟渲染和滚动穿透问题，仅靠 HTML/JS 不够。必须显式锁定 body 滚动，并防止 backdrop 点击穿透失效。
解决方式：
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 监听
dialog:show和dialog:close事件控制body样式 - 给
dialog::backdrop设background: rgba(0,0,0,0.8)，否则 iOS 可能渲染为空白
<style>
body.lock-scroll { overflow: hidden; height: 100vh; }
dialog::backdrop {
background: rgba(0, 0, 0, 0.8);
}
</style>
<script>
dialog.addEventListener('show', () => {
document.body.classList.add('lock-scroll');
});
dialog.addEventListener('close', () => {
document.body.classList.remove('lock-scroll');
});
</script>
不想用 dialog？object-fit: contain + transform: scale() 手动控制更灵活
当需要自定义动画、支持老浏览器（如 IE11）、或要叠加标注/下载按钮时，放弃 <dialog> 改用绝对定位容器 + CSS 动画更可控。但要注意：直接用 width/height 改变图片尺寸会失真，必须配合 object-fit。
核心要点：
- 放大容器用
transform: scale(1.2)，而非改width，保持清晰度 - 图片父容器设
overflow: hidden，避免缩放后边缘外露 - 用
transition: transform 0.2s ease实现平滑入场
<div class="img-container">
<img src="photo.jpg" alt="风景" class="clickable-img">
</div>
<style>
.img-container {
position: relative;
overflow: hidden;
cursor: zoom-in;
}
.clickable-img {
display: block;
width: 100%;
height: auto;
transition: transform 0.2s ease;
}
.img-container.zoomed .clickable-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.5);
max-width: none;
max-height: none;
}
</style>
<script>
const container = document.querySelector('.img-container');
container.addEventListener('click', () => {
container.classList.toggle('zoomed');
});
</script>
为什么不用 lightbox 类库？兼容性和体积是硬伤
像 lightGallery.js 或 fancybox 这类库在移动端常出现手势冲突（双指缩放失效）、z-index 覆盖失败、或引入大量未使用的 CSS/JS。尤其当项目已用 ES modules 或 Vite 构建时，这些 jQuery 时代的老库会破坏 tree-shaking。
实际取舍建议：
- 仅 1–3 张图 → 用原生
<dialog>，代码不到 30 行 - 需拖拽/缩放/下载/EXIF 显示 → 再考虑
PhotoSwipe（它已支持 ESM，且无 jQuery 依赖） - 必须兼容 IE11 → 放弃
<dialog>，用纯 CSS +transform方案，但要补msTransform
真正容易被忽略的是：无论用哪种方案，alt 属性必须同步传入放大视图，否则屏幕阅读器无法读取——这点在所有 demo 示例里都常被漏掉。
