ASP.NET表格值为1的单元格弹窗显示异常，点击均触发首个弹窗问题求助

云原生阿岚

2026-9-25

解决方法

你遇到的问题核心是HTML页面中ID必须唯一，document.getElementById只会匹配页面中第一个出现的对应ID元素，所以所有弹窗触发后只会打开第一个。我们不需要给每个弹窗单独写触发函数，只要把当前点击的元素传入函数，查找其内部的弹窗元素即可，适配ASP.NET动态生成表格的场景。

1. 修改触发调用

把表格中所有弹窗div的onclick属性改成传当前元素，同时可以直接删除所有popuptext的id属性，后续用类名查找即可，不需要维护唯一ID：

<div class="popup" onclick="myFunction(this)">1
  <span class="popuptext">
  Customer name : Neeraj
  Customer Number : 1234567890
  Contact Date & Time : 11/25/2021 14:04
  Agent Name
  </span>
</div>

2. 替换JS代码

function myFunction(currentPopup) {
  // 查找当前点击的popup内部的弹窗元素
  const popupText = currentPopup.querySelector('.popuptext');
  // 先关闭其他已经打开的弹窗，避免同时弹出多个
  document.querySelectorAll('.popuptext.show').forEach(item => {
    if(item !== popupText) item.classList.remove('show');
  });
  // 切换当前弹窗的显示状态
  popupText.classList.toggle('show');
}

// 可选优化：点击页面其他区域自动关闭所有弹窗
document.addEventListener('click', function(e) {
  if(!e.target.closest('.popup')) {
    document.querySelectorAll('.popuptext.show').forEach(item => {
      item.classList.remove('show');
    });
  }
});