如何让多个模态框的JS onclick外部关闭函数正常生效？

你遇到的问题核心原因很明确：当你连续两次给window.onclick赋值时，第二个函数会直接覆盖第一个。浏览器只会执行最后绑定的那个点击回调，所以只有modalBtc的关闭逻辑能正常工作，modalEth的逻辑被完全覆盖掉了。

这里有两种靠谱的解决方案，你可以根据自己的代码习惯选择：

方案一：合并逻辑到同一个点击回调里 #

把两个模态框的判断逻辑放到同一个window.onclick函数中，这样两个条件都会被依次检查：

window.onclick = function(event) {
  // 处理modalEth的关闭逻辑
  if (event.target == modalEth) {
    modalEth.style.display = "none";
  }
  // 处理modalBtc的关闭逻辑
  if (event.target == modalBtc) {
    modalBtc.style.display = "none";
  }
}

这种方式简单直接，适合逻辑不复杂的场景，代码也容易维护。

方案二：使用addEventListener绑定多个事件监听器 #

如果你希望保持两个模态框逻辑的独立性，或者之后可能需要单独移除某个关闭逻辑，推荐用addEventListener来添加事件。这种方式不会覆盖已有的监听器，多个回调会按绑定顺序依次执行：

// 绑定modalEth的点击外部关闭逻辑
window.addEventListener('click', function(event) {
  if (event.target == modalEth) {
    modalEth.style.display = "none";
  }
});

// 绑定modalBtc的点击外部关闭逻辑
window.addEventListener('click', function(event) {
  if (event.target == modalBtc) {
    modalBtc.style.display = "none";
  }
});

两种方案都能完美解决你的问题，选哪种主要看你后续的代码扩展需求~

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