AJAX操作后模态框未完全关闭及页面背景重置问题咨询

我来帮你搞定这个问题！看起来核心问题出在模态框隐藏和AJAX页面刷新的时序冲突上——Bootstrap的modal('hide')是带动画的异步操作，可能模态框还没完全从DOM里清理干净，你就开始替换#ajaxshow的内容了，导致模态框的残留元素没被正确移除；另外有时候模态框隐藏后，背景遮罩层（modal-backdrop）也会“赖着不走”，让你觉得模态框没完全关闭。

试试把你的OnSuccess函数改成这样：

function OnSuccess(data) {
  if (data.status) {
    swal({ 
      title: "AAAAAAAAAAAAAAAAAA", 
      type: "success", 
      text: data.message, 
      showConfirmButton: false, 
      timer: 1500 
    }).then(function() {
      // 先触发模态框隐藏
      $('#myModal').modal('hide');
      
      // 等模态框完全隐藏（包括动画结束）后再执行刷新
      $('#myModal').on('hidden.bs.modal', function() {
        // 手动移除可能残留的背景遮罩层
        $('.modal-backdrop').remove();
        // 解除事件绑定，避免下次打开模态框时重复触发
        $(this).off('hidden.bs.modal');
        
        // 刷新AJAX页面
        $.ajax({ 
          url: "/Forces/Index/", 
          type: "Get", 
          dataType: "html" 
        }).done(function (result) {
          $('#ajaxshow').html(result);
        });
      });
    });
  } else {
    swal({ 
      title: "ثبت شده", 
      type:"warning", 
      text: data.message, 
      showConfirmButton: false, 
      timer: 1500 
    });
  }
}

关键调整说明： #

• 把模态框操作放到swal的回调里：确保提示框消失后再处理模态框，避免用户还在看提示时页面就开始刷新，体验更顺畅
• 用hidden.bs.modal事件：这是Bootstrap模态框提供的、完全隐藏后才触发的事件，能保证模态框的DOM元素已经被正确处理，再执行AJAX刷新就不会冲突了
• 手动清理遮罩层：防止modal-backdrop元素残留，解决页面“变灰”或者点击无响应的问题
• 解除事件绑定：避免下次打开模态框时，这个刷新事件被重复触发，导致不必要的AJAX请求

如果还是有问题，可以额外加一步：在模态框隐藏后，清空模态框的内容（比如$('#myModal .modal-content').empty();），确保内部DOM元素被彻底清理。

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