如何用JS实现所有模态框共用关闭逻辑？附代码故障排查

问题原因 #

你仅对页面中第一个.close元素绑定了点击关闭事件，其余3个模态框对应的关闭按钮没有绑定任何事件监听，因此点击无响应。你代码中注释掉的「获取对应索引关闭按钮」的逻辑没有实际启用，也没有给这些按钮绑定事件，最终导致只有第一个模态框可以正常关闭。

修复方案 #

方案1：优化代码结构，减少冗余逻辑 #

统一管理模态框与按钮的映射关系，批量绑定打开/关闭事件，后续新增模态框只需修改映射表即可：

var activeModal;
var overlay = document.getElementById("overlay");
// 按钮ID对应模态框ID的映射表
var modalMap = {
  "btn-carapesan": "modal-carapesan",
  "btn-ketentuan": "modal-ketentuan",
  "btn-jaminan": "modal-jaminan",
  "btn-harga": "modal-harga"
};

// 批量绑定打开模态框事件
Object.keys(modalMap).forEach(btnId => {
  document.getElementById(btnId).addEventListener('click', () => {
    activeModal = document.getElementById(modalMap[btnId]);
    activeModal.style.display = "block";
    overlay.style.display = "block";
  })
})

// 批量绑定所有关闭按钮的事件
document.querySelectorAll(".close").forEach(closeBtn => {
  closeBtn.addEventListener('click', () => {
    activeModal.style.display = "none";
    overlay.style.display = "none";
  })
})

方案2：不改动原有代码结构，补充关闭事件绑定 #

直接遍历所有关闭按钮，统一绑定关闭逻辑即可：

// 原有代码不变，新增以下逻辑
var allCloseBtns = document.getElementsByClassName('close');
for (var i = 0; i < allCloseBtns.length; i++) {
  allCloseBtns[i].onclick = function() {
    modal.style.display = "none";
    document.getElementById("overlay").style.display = "none";
  }
}

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