如何让多个Modal模态页面的closeButton关闭按钮正常生效

问题原因 #

document.querySelector('.closeButton') 只会匹配页面中第一个类为closeButton的元素，所以第二个模态框的关闭按钮没有绑定点击事件，无法触发关闭操作。你打算使用forEach方法的思路完全可行。

修复后的完整JavaScript代码 #

// 原有打开模态框的逻辑保留
document.getElementById('portfolioPg1').addEventListener('click', function (){
  document.querySelector('.modalFish').style.display = 'flex';
});

document.getElementById('portfolioPg2').addEventListener('click', function (){
  document.querySelector('.modalTurtle').style.display = 'flex';
});

// 替换原有关闭按钮绑定逻辑
// 选中页面所有关闭按钮
const allCloseButtons = document.querySelectorAll('.closeButton');
// 遍历每个关闭按钮，逐一绑定点击事件
allCloseButtons.forEach(closeBtn => {
  closeBtn.addEventListener('click', function () {
    // 隐藏所有模态框
    document.querySelector('.modalFish').style.display = 'none';
    document.querySelector('.modalTurtle').style.display = 'none';
  });
});

后续扩展性优化建议 #

如果后续要新增更多作品模态框，可给所有模态框容器加上统一的公共类名modal，无需每次新增模态框都修改关闭逻辑：

1. HTML修改示例：

<div id="modalPage1" class="modalFish modal">
  <!-- 原有内容不变 -->
</div>
<div id="modalPage2" class="modalTurtle modal">
  <!-- 原有内容不变 -->
</div>

2. 优化后的关闭逻辑：

allCloseButtons.forEach(closeBtn => {
  closeBtn.addEventListener('click', function () {
    // 选中所有模态框统一隐藏，新增模态框无需修改这段代码
    document.querySelectorAll('.modal').forEach(modal => {
      modal.style.display = 'none';
    });
  });
});

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