Modal窗口关闭异常修复：添加动画后多窗口无法逐个关闭

嘿，我之前也碰到过一模一样的坑！你遇到的Uncaught TypeError: Cannot read property 'remove' of undefined错误，本质是处理关闭动画时，Modal元素的引用被后续操作覆盖了——当你打开两个Modal再逐个关闭时，共享变量已经被第二个Modal的引用替换，导致定时器触发时找不到第一个Modal的DOM节点。

问题代码还原（模拟常见错误写法） #

大概率你的问题代码是类似这样的：

// 问题代码：使用全局变量保存Modal引用，导致被覆盖
let activeModal;

document.querySelectorAll('.close-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    // 每次点击都把activeModal替换成当前点击按钮对应的Modal
    activeModal = btn.closest('.modal');
    activeModal.classList.add('slide-out');
    
    // 定时器触发时，activeModal已经变成第二个Modal的引用（如果先关第二个再关第一个）
    setTimeout(() => {
      activeModal.remove(); // 此时第一个Modal的引用已经丢失，报错undefined
    }, 300);
  });
});

修复方案：为每个Modal保留独立引用 #

解决这个问题的核心是在每个关闭事件中单独保存当前要关闭的Modal元素，避免共享变量覆盖。我们可以通过局部变量或者闭包来实现，具体代码如下：

修复后的JavaScript代码 #

// 修复后：用局部变量保存当前Modal的独立引用
document.querySelectorAll('.close-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 用局部变量currentModal保存当前要关闭的Modal，不会被其他操作覆盖
    const currentModal = this.closest('.modal');
    
    // 添加滑出动画类
    currentModal.classList.add('slide-out');
    
    // 定时器触发时，操作的是当前事件绑定的Modal引用
    setTimeout(() => {
      currentModal.remove();
    }, 300); // 注意：这里的时间要和CSS动画时长完全一致
  });
});

配套的CSS动画代码（确保和JS定时器同步） #

/* 底部滑出关闭动画 */
.slide-out {
  animation: slideOutDown 0.3s ease forwards;
  /* 动画过程中禁止点击，避免重复触发 */
  pointer-events: none;
}

@keyframes slideOutDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

关键修改点对比 #

额外优化建议 #

如果你的Modal是动态创建的（比如通过JavaScript动态添加到DOM中），建议使用事件委托来绑定关闭事件，确保新创建的Modal也能正常触发关闭逻辑：

// 动态Modal的事件委托写法
document.body.addEventListener('click', function(e) {
  // 判断点击的元素是关闭按钮
  if (e.target.matches('.close-btn')) {
    const currentModal = e.target.closest('.modal');
    currentModal.classList.add('slide-out');
    setTimeout(() => {
      currentModal.remove();
    }, 300);
  }
});

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