本文介绍如何在 html 表格中动态绑定多张缩略图，并通过纯 javascript 实现点击任意图片后，在带动画效果的模态框（modal）中全屏展示原图，支持关闭、响应式缩放及标题显示。

在实际 Web 开发中，常需在数据表格中嵌入图像缩略图（如监控截图、产品图、日志快照等），并提供便捷的全图查看能力。本文提供一套轻量、无依赖、兼容现代浏览器的解决方案，不依赖 Bootstrap 的 JS 组件（避免 data-bs-toggle 冲突），完全通过原生 JavaScript + CSS 实现。

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

✅ 核心思路

• 为每张缩略图添加统一 class（如 class="image"），便于批量事件绑定；
• 使用 document.getElementsByClassName('image') 遍历所有图片，为每个绑定 click 事件；
• 点击时动态设置模态框内 的 src 和
  的文本内容；
• 模态框采用 position: fixed + 半透明黑色背景，确保层级与沉浸感；
• 图片容器 .modal-content 设置 max-width 和 margin: auto 实现居中，配合 CSS 动画增强交互体验。

? 关键代码实现

1. 表格中的缩略图（注意：移除重复 ID，改用 class）

<td>
  <img class="image" 
       src="~/grafi/@(item.MyImgId + ".png")" 
       alt="@item.MyImgId" 
       style="height:50px; cursor:pointer;" />
</td>

⚠️ 注意：原代码中 id="myImg" 在循环中重复出现，违反 HTML 规范（ID 必须唯一），应改为 class="image"。

2. 模态框结构（含关闭按钮与占位元素）

<!-- The Modal -->
<div id="myModal" class="modal">
  <span id="close" class="close">&times;</span>
  <img  class="modal-content" id="modalImg" alt="如何在表格中点击图片弹出全屏预览窗口" >
  <div id="caption"></div>
</div>

3. JavaScript 逻辑（推荐放在