本文介绍如何在 html 表格中动态绑定多张缩略图，并通过纯 javascript 实现点击任意图片后，在带动画效果的模态框（modal）中全屏展示原图，支持关闭、响应式缩放及标题显示。
在实际 Web 开发中，常需在数据表格中嵌入图像缩略图（如监控截图、产品图、日志快照等），并提供便捷的全图查看能力。本文提供一套轻量、无依赖、兼容现代浏览器的解决方案，不依赖 Bootstrap 的 JS 组件（避免 data-bs-toggle 冲突），完全通过原生 JavaScript + CSS 实现。
✅ 核心思路
- 为每张缩略图添加统一 class（如 class="image"），便于批量事件绑定；
- 使用 document.getElementsByClassName('image') 遍历所有图片，为每个绑定 click 事件；
- 点击时动态设置模态框内
的 src 和
的文本内容；- 模态框采用 position: fixed + 半透明黑色背景，确保层级与沉浸感；
- 图片容器 .modal-content 设置 max-width 和 margin: auto 实现居中，配合 CSS 动画增强交互体验。
? 关键代码实现
1. 表格中的缩略图（注意：移除重复 ID，改用 class）
@@##@@ ⚠️ 注意：原代码中 id="myImg" 在循环中重复出现，违反 HTML 规范（ID 必须唯一），应改为 class="image"。
2. 模态框结构（含关闭按钮与占位元素）
× @@##@@3. JavaScript 逻辑（推荐放在
