如何用JS和CSS多次切换div可见性？弹窗二次无法打开问题排查

问题原因 #

1. 类未移除导致样式冲突：关闭弹窗时，仅给modal添加了close-modal类，但未移除打开时添加的open-modal类，两个类同时存在于元素上。
2. !important优先级冲突：两个控制显示/隐藏的类都用!important强制设置visibility，当两类共存时，后定义的类样式会覆盖先定义的，导致后续添加open-modal无法覆盖close-modal的隐藏样式。

修复方案 #

方案一：操作类时同步移除对立类 #

保留原有CSS结构，修改JS逻辑，添加目标类的同时移除对立类：

打开弹窗函数：

function openModal() {
  modal.classList.add('open-modal');
  modal.classList.remove('close-modal');
}

关闭弹窗函数：

function close_modal() {
  modal.classList.add('close-modal');
  modal.classList.remove('open-modal');
}

方案二：简化CSS与类操作（推荐） #

去掉冗余的close-modal类，仅用open-modal控制显示，通过ID+类的选择器提升权重，避免!important：

修改后的CSS：

#modal{
  width: 30em;
  height: 24em;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}

#modal.open-modal{
  visibility: visible;
}

对应JavaScript：
打开弹窗函数：

function openModal() {
  modal.classList.add('open-modal');
}

关闭弹窗函数：

function close_modal() {
  modal.classList.remove('open-modal');
}

这种方式从根源避免了类冲突和优先级问题，代码更简洁。

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