我正在为一个游戏百科编写一个带有交互式模态框的页面，用来预览角色的内容。模态框通过点击图片打开，点击X 或在模态框外任意位置关闭。

用于打开模态框的图片上的代码：

onclick="modal()";

控制模态框何时显示的函数部分：

function modal() {
    modal.style.display = "block";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    modalSettingsMenu.style.display = "none";
  } else if (event.target === modalClose) {
    modal.style.display = "none";
    modalSettingsMenu.style.display = "none";
  }
}

模态框关闭时，下面所述的设置菜单也会被设为不显示。

模态框中有一个按钮，按下后可以打开设置菜单。当我在新页面打开模态框时，一切都按预期工作。点击该按钮会打开设置菜单，我可以按需要修改设置。

示例：

Quick video of how it's supposed to work

如果我在不刷新页面的情况下先退出模态框再重新打开，设置按钮就无法打开设置菜单。不过如果我先关闭该模态框再重新打开，按钮又能工作。每次关闭再重新打开模态框时，按钮的能否工作会交替出现。

按钮HTML：

<button id="modalSettingsButton">Settings</button>

打开设置菜单的JavaScript代码：

modalSettingsButton.addEventListener("click", function() {
if (modalSettingsMenu.style.display === "block") {
   modalSettingsMenu.style.display = "none";
} else {
   modalSettingsMenu.style.display = "block";
}    
});

我需要修改哪些内容，才能让每次打开模态框时，点击设置按钮都能打开设置菜单？

解决方案

原因

当你点击模态框的切换按钮时，确实会把模态框的显示设置为 "block"。然而，由于你没有在切换模态框后明确让按钮的点击事件处理程序停止执行，点击事件会继续冒泡，导致窗口元素的点击处理程序被调用，从而再次隐藏模态框。

你应该参考 事件冒泡 了解更多信息。

解决方案

你应该在窗口的点击处理程序中，对你要修改的每个组件的事件处理程序末尾添加 e.stopPropagation()，以防止它覆盖切换逻辑。

modal.addEventListener("click", (e) => {
    // Modal toggle logic here
    e.stopPropagation();
});

modalClose.addEventListener("click", (e) => {
    // Modal toggle logic here
    e.stopPropagation();
});