如何使用jQuery关闭动态模态框并解决遮罩残留页面卡死问题

问题原因 #

• 重复生成模态框DOM未销毁旧实例：每次执行displayEquipe、displayAddEquipe方法时都会重新插入模态框元素，但之前调用modal()生成的Bootstrap实例和关联遮罩层未被清理，多次叠加后modal('hide')无法匹配正确实例，导致遮罩残留。
• 全局临时数组未清空：nouveau_donnee数组存储新增的临时用户数据，调用确认方法后未清空，多次操作后数据量持续累加，会造成页面卡顿。
• 模态框嵌套位置不符合规范：你将模态框直接嵌套在表格<th>标签内，父元素的定位、overflow等样式会影响模态框和遮罩层的层级关系，导致关闭逻辑异常。
• 关闭模态框后未清理body状态：Bootstrap打开模态框时会给body添加modal-open类设置overflow为hidden，若关闭时未移除该类，页面会出现无法滚动的「卡死」状态。

修复方案 #

1. 重写DOM前先销毁旧模态框实例 #

在displayEquipe、displayAddEquipe函数开头新增旧实例销毁逻辑，避免实例叠加：

// displayEquipe函数最开头添加
function displayEquipe() {
  // 新增：销毁所有已存在的模态框实例并移除DOM
  $('.modal').each(function(){
    const $modal = $(this);
    const modalInstance = $modal.data('bs.modal') || $modal.data('modal');
    if (modalInstance) {
      $modal.modal('hide');
      modalInstance.dispose ? modalInstance.dispose() : modalInstance.remove();
    }
    $modal.remove();
  });
  // 原有逻辑保持不变
  let agent = [];
  const element = $('#equipe_display');
  element.html('');
  // ... 其余原有代码
}

// displayAddEquipe函数最开头添加
function displayAddEquipe() {
  // 新增：销毁新增团队模态框的旧实例
  const $addModal = $('#myModal');
  const addModalInstance = $addModal.data('bs.modal') || $addModal.data('modal');
  if (addModalInstance) {
    $addModal.modal('hide');
    addModalInstance.dispose ? addModalInstance.dispose() : addModalInstance.remove();
  }
  $addModal.remove();
  // 原有逻辑保持不变
  var html_equipe_add = ``;
  const element = $('#add_equipe');
  element.html('');
  // ... 其余原有代码
}

2. 模态框关闭时手动清理残留 #

修改addAgentEquipe、valider_equipe_ajout函数的关闭逻辑，手动移除遮罩和body状态类：

// 修改addAgentEquipe函数
function addAgentEquipe(indexEquipe){  
  nouveau_donnee.forEach((agent)=> {
    equipes_info[indexEquipe]['agentsList'].push(agent); 
  });
  const $targetModal = $('#myModal'+indexEquipe);
  $targetModal.modal('hide');
  // 新增：清空临时数组、清理残留遮罩和body状态
  nouveau_donnee = [];
  $('.modal-backdrop').remove();
  $('body').removeClass('modal-open');
  displayEquipe(); 
}

// 修改valider_equipe_ajout函数中的关闭逻辑
function valider_equipe_ajout() {
  // ... 原有逻辑不变
  $('#myModal').modal('hide');
  // 新增：清理残留遮罩和body状态
  $('.modal-backdrop').remove();
  $('body').removeClass('modal-open');
  // ... 原有逻辑不变
}

3. 优化模态框嵌套位置（可选，推荐） #

在页面body下新增单独的模态框容器：

<div id="modal_container"></div>

生成所有模态框时都插入到该容器内，不要嵌套在表格等元素中，避免样式冲突导致的关闭异常。

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