如何通过点击HTML表格单元格生成可配置尺寸的专属内容弹窗？

没问题，我来给你一套完整的实现方案，完全满足你的需求——每个单元格带唯一ID、弹窗尺寸可配置、展示对应单元格的独特内容。直接上代码，每部分我都会解释清楚：

1. HTML 结构 #

首先咱们先搭好表格的基础结构，每个单元格都设置唯一ID，同时用data-*属性存储弹窗需要的自定义内容和尺寸参数，这样后期维护和扩展都方便：

<table border="1" cellpadding="10">
  <tr>
    <td id="cell-1" data-content="这是单元格1的专属内容，包含一些独特信息~" data-width="400px" data-height="250px">点击我看弹窗1</td>
    <td id="cell-2" data-content="单元格2的内容不一样哦，这里可以放文本、甚至简单的HTML标签" data-width="500px" data-height="300px">点击我看弹窗2</td>
  </tr>
  <tr>
    <td id="cell-3" data-content="单元格3的内容更简洁😉" data-width="300px" data-height="150px">点击我看弹窗3</td>
    <td id="cell-4" data-content="这是最后一个单元格的专属内容，支持换行<br>也没问题" data-width="450px" data-height="200px">点击我看弹窗4</td>
  </tr>
</table>

<!-- 弹窗容器（初始隐藏） -->
<div id="modal-overlay" class="modal-overlay"></div>
<div id="custom-modal" class="custom-modal">
  <button id="close-modal" class="close-btn">×</button>
  <div id="modal-content" class="modal-body"></div>
</div>

2. CSS 样式 #

接下来给弹窗和遮罩层写样式，确保弹窗居中显示，并且支持自定义尺寸，同时做一些基础的美化：

/* 遮罩层：覆盖整个页面，半透明背景 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 999;
}

/* 弹窗容器：默认隐藏，居中定位 */
.custom-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 1000;
  overflow: auto;
}

/* 关闭按钮 */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.close-btn:hover {
  color: #000;
}

/* 弹窗内容区域 */
.modal-body {
  padding: 20px;
  margin-top: 10px;
}

3. JavaScript 逻辑 #

最后写核心的交互逻辑，监听单元格点击事件，读取对应的数据参数，动态配置弹窗并显示：

// 获取DOM元素
const cells = document.querySelectorAll('td');
const modal = document.getElementById('custom-modal');
const modalOverlay = document.getElementById('modal-overlay');
const modalContent = document.getElementById('modal-content');
const closeBtn = document.getElementById('close-modal');

// 给每个单元格绑定点击事件
cells.forEach(cell => {
  cell.addEventListener('click', () => {
    // 读取当前单元格的自定义数据
    const cellId = cell.id;
    const content = cell.dataset.content;
    const width = cell.dataset.width;
    const height = cell.dataset.height;

    // 配置弹窗内容和尺寸
    modalContent.innerHTML = content;
    modal.style.width = width;
    modal.style.height = height;

    // 显示弹窗和遮罩层
    modal.style.display = 'block';
    modalOverlay.style.display = 'block';

    // 可选：控制台打印单元格ID，方便调试
    console.log(`点击了单元格：${cellId}`);
  });
});

// 关闭弹窗的通用函数
function closeModal() {
  modal.style.display = 'none';
  modalOverlay.style.display = 'none';
}

// 点击关闭按钮关闭弹窗
closeBtn.addEventListener('click', closeModal);

// 点击遮罩层关闭弹窗
modalOverlay.addEventListener('click', closeModal);

// 按ESC键关闭弹窗（可选增强功能）
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
  }
});

关键功能说明 #

• 唯一ID标识：每个<td>都有唯一的id属性，你可以根据这个ID做更多扩展（比如后端数据关联）。
• 可配置尺寸：通过data-width和data-height属性，每个单元格可以单独设置弹窗的宽高，支持px、%等单位。
• 专属内容展示：data-content里可以放纯文本，也可以放简单的HTML标签（比如<br>、<strong>），满足不同内容需求。
• 用户体验优化：支持点击关闭按钮、遮罩层、ESC键三种关闭方式，交互更友好。

你可以直接把这段代码复制到HTML文件里运行，测试每个单元格的效果，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Navin Kumar