如何在表格中点击图片弹出全屏预览窗口

本文介绍如何在 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 逻辑（推荐放在