弹窗关闭后无法重新打开的技术问题求助

问题根源 #

1. 样式冲突：关闭弹窗时添加的hide类设置display:none，打开时添加的show类设置visibility:visible。由于display:none会让元素完全脱离文档流，优先级高于visibility，即使添加show类，弹窗仍处于不可见状态，导致无法重新打开。
2. 事件冒泡：当你尝试改用remove("show")关闭弹窗时，点击关闭按钮的事件会冒泡到父级的.aboutPopup元素，触发其onclick事件重新添加show类，导致弹窗无法关闭。

修复步骤 #

1. 统一弹窗显示/隐藏的控制逻辑 #

移除hide类，仅通过show类控制弹窗状态，修改CSS：

/* 默认隐藏弹窗 */
.aboutPopupText {
  visibility: hidden;
}
/* 显示弹窗的类 */
.aboutPopupText.show {
  visibility: visible;
}

2. 修复关闭函数并阻止事件冒泡 #

修改关闭函数，移除show类同时阻止事件冒泡，避免触发父元素的打开事件：

function theFunctionAboutClose(e) {
  var popup = document.getElementById("thePopupAbout");  
  popup.classList.remove("show");
  // 阻止事件冒泡到父级的.aboutPopup元素
  e.stopPropagation();
}

3. 更新HTML中的关闭按钮 #

调用关闭函数时传递事件参数：

<button class="aboutPopupClose" onclick="theFunctionAboutClose(event)">x</button>

4. 保持打开函数不变 #

打开函数无需修改，依然是添加show类：

function theFunctionAbout() {
  var popup = document.getElementById("thePopupAbout");
  popup.classList.add("show");
}

为什么另一个表单弹窗可以正常工作？ #

表单内的关闭按钮默认type="submit"，点击时会触发表单提交行为（可能刷新页面或被其他逻辑拦截），中断了事件冒泡，因此不会触发父元素的打开事件，所以remove("show")可以正常生效。

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