JS弹窗按钮仅能触发一次，关闭后需刷新页面才可再次点击

问题根因 #

现有代码只做了类名追加操作，从未移除历史添加的类名，导致状态冲突：

• 首次点击打开按钮时，给弹窗追加open类、遮罩层追加overlay-open类，弹窗正常弹出
• 点击关闭按钮时，仅追加了popClose、overlay-close类，之前添加的open、overlay-open类始终保留在DOM元素上，二次点击打开按钮时类名已存在，无法重新触发弹窗显示逻辑和动画
• 关闭动画执行完成后，没有将弹窗重置为初始隐藏状态，后续交互无法正常触发

修复步骤 #

1. 替换JS交互逻辑 #

打开和关闭时互斥切换类名，关闭动画结束后重置元素初始状态，代码如下：

const btn = document.querySelector('.btn');
const cloBtn = document.querySelector('.close');
const popUp = document.querySelector('.popup');
const overlay = document.querySelector('.overlay');

btn.addEventListener('click', () => {
  // 清除关闭状态残留类名
  popUp.classList.remove('popClose');
  overlay.classList.remove('overlay-close');
  // 添加打开状态类名
  popUp.classList.add('open');
  overlay.classList.add('overlay-open');
});

cloBtn.addEventListener('click', () => {
  // 清除打开状态类名
  popUp.classList.remove('open');
  overlay.classList.remove('overlay-open');
  // 添加关闭状态类名触发关闭动画
  popUp.classList.add('popClose');
  overlay.classList.add('overlay-close');

  // 等待0.3s关闭动画执行完成，移除关闭类名，将元素重置为初始状态
  setTimeout(() => {
    popUp.classList.remove('popClose');
    overlay.classList.remove('overlay-close');
  }, 300)
})

2. 精简冗余CSS（可选优化） #

遮罩层默认样式已经设置了visibility: hidden，移除overlay-open类就会自动隐藏，不需要单独写overlay-close类，可以删除CSS中如下冗余代码：

.overlay-close {
  visibility: hidden;
}

修复完成后，点击关闭按钮弹窗会播放缩小关闭动画，无需刷新页面即可重复点击按钮触发弹窗。

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