如何实现点击不同按钮弹出对应独立弹窗，解决团队介绍页弹窗内容重复问题

• 第二个成员的弹窗class属性写为modal2，和CSS中定义的.modal类不匹配，本身就无法正常渲染显示
• 所有弹窗控制函数都是硬编码操作第一个弹窗的DOM对象modal，点击任意按钮只会控制第一个成员的弹窗开关
• 选择关闭按钮时只用了document.querySelector('.close')，只会获取到第一个弹窗的关闭按钮，第二个弹窗的关闭按钮未绑定有效事件

1. 修改HTML代码 #

统一所有弹窗的class为modal，给每个Read More按钮添加data-modal属性，值为对应弹窗的id，核心修改片段如下：

<!-- 第一个成员的按钮 -->
<button id="modal-btn" class="button" data-modal="my-modal">Read More</button>
<div id="my-modal" class="modal">
  <!-- 原有弹窗内容不变 -->
</div>

<!-- 第二个成员的按钮和弹窗 -->
<button id="modal-btn2" class="button" data-modal="my-modal2">Read More</button>
<div id="my-modal2" class="modal">
  <!-- 原有弹窗内容不变 -->
</div>

2. 替换原有JS代码为通用逻辑 #

不需要为每个成员单独写绑定逻辑，后续新增成员也不需要修改JS代码：

// 监听所有Read More按钮点击，打开对应弹窗
document.querySelectorAll('.button').forEach(btn => {
  btn.addEventListener('click', () => {
    const targetModal = document.querySelector(`#${btn.dataset.modal}`);
    targetModal.style.display = 'block';
  })
})

// 监听所有关闭按钮点击，关闭所属弹窗
document.querySelectorAll('.close').forEach(closeBtn => {
  closeBtn.addEventListener('click', (e) => {
    const targetModal = e.target.closest('.modal');
    targetModal.style.display = 'none';
  })
})

// 点击弹窗外部区域关闭弹窗
window.addEventListener('click', (e) => {
  if (e.target.classList.contains('modal')) {
    e.target.style.display = 'none';
  }
})

CSS代码无需修改即可正常运行。

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