关闭Swal弹窗后网页卡顿无响应？求解决方案

问题根源 #

手动操作DOM移除modal类名的方式不符合组件（如Bootstrap Modal）的规范，会导致DOM元素残留、事件监听未清理，进而引发页面卡顿；另外可能和Swal的异步回调逻辑冲突。

具体修复方案 #

1. 使用Modal官方API关闭（推荐，以Bootstrap为例）

不要手动移除类名，调用Modal实例的hide()方法，它会自动处理modal隐藏、backdrop移除、事件解绑等所有逻辑：

const handleCloseModal = () => {
  const modalElement = document.getElementById("modalid");
  // 若已初始化Modal实例，直接获取；否则初始化后隐藏
  const modalInstance = bootstrap.Modal.getInstance(modalElement) || new bootstrap.Modal(modalElement);
  modalInstance.hide();
}

2. 修正手动移除backdrop的逻辑（非官方组件场景）

如果是自定义modal，不要移除modal-backdrop类，而是直接删除backdrop元素，避免无用DOM残留：

const handleCloseModal = () => {
  const modal = document.getElementById("modalid");
  modal.classList.remove("show","d-block");
  // 直接删除backdrop元素，而非移除类名
  document.querySelectorAll(".modal-backdrop").forEach(el => el.remove());
}

3. 确保关闭逻辑在Swal异步回调内执行

Swal的确认弹窗是异步的，必须把关闭modal的逻辑放在它的then回调里，避免同步执行导致的冲突：

// 示例：表单提交函数内的逻辑
const onSubmit = () => {
  // 表单验证、提交逻辑...
  
  Swal.fire({
    title: "提交成功",
    text: "你的表单已成功提交",
    icon: "success"
  }).then((result) => {
    if (result.isConfirmed) {
      handleCloseModal(); // 点击OK后再执行关闭
    }
  });
}

4. 检查表单提交默认行为

确保在submit事件中阻止页面默认刷新行为，避免不必要的页面重载卡顿：

const form = document.getElementById("your-form-id");
form.addEventListener("submit", (e) => {
  e.preventDefault(); // 阻止默认表单提交刷新
  onSubmit(); // 执行自定义提交逻辑
});

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