点击第二个按钮时Modal始终显示第一个模态框内容如何修复？

• 全局变量重复覆盖：你使用var重复声明了modal、btn、span三个全局变量，后续逻辑的赋值会直接覆盖之前的值，导致前面按钮的点击事件最终引用的是最后一次赋值的模态框对象
• 关闭按钮索引错误：所有关闭事件都取document.getElementsByClassName("close")[0]，仅绑定了第一个模态框的关闭按钮，第二个模态框的关闭按钮没有绑定对应事件
• 全局点击事件被覆盖：重复给window.onclick赋值，只有最后一次绑定的关闭逻辑会生效
• 普通用户组逻辑错误：type=2的用户组中，第二个按钮绑定的模态框ID仍然是第一个模态框myModal，如果需要打开独立模态框还要先补充对应的HTML结构

删掉所有重复的模态框绑定逻辑，改用通用绑定函数避免重复代码和变量覆盖问题：

1. 新增通用模态框绑定函数

function bindModal(btnId, modalId, closeBtnIndex) {
  const modal = document.getElementById(modalId);
  const triggerBtn = document.getElementById(btnId);
  const closeBtn = document.getElementsByClassName("close")[closeBtnIndex];
  
  // 按钮点击打开模态框
  triggerBtn.addEventListener('click', () => {
    modal.style.display = "block";
  });
  
  // 点击关闭按钮关闭模态框
  closeBtn.addEventListener('click', () => {
    modal.style.display = "none";
  });
  
  // 点击模态框外部区域关闭
  window.addEventListener('click', (event) => {
    if (event.target === modal) {
      modal.style.display = "none";
    }
  });
}

2. 管理员用户组（type=1）调用绑定函数

// 6个按钮依次绑定，第二个按钮对应第二个模态框，关闭按钮索引为1
bindModal('myBtn', 'myModal', 0);
bindModal('myBtn2', 'myModal2', 1);
bindModal('myBtn3', 'myModal', 0);
bindModal('myBtn4', 'myModal', 0);
bindModal('myBtn5', 'myModal', 0);
bindModal('myBtn6', 'myModal', 0);

3. 普通用户组（type=2）调整逻辑
   如果第二个按钮需要打开独立模态框，先补充myModal2的HTML结构，再调用绑定函数即可：

bindModal('myBtn', 'myModal', 0);
bindModal('myBtn2', 'myModal2', 1);

如果是共用第一个模态框，直接绑定即可。

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