Ajax请求成功后切换Modal时页面黑屏无响应问题

从你的描述和代码来看，这个黑屏无响应的问题大概率是Bootstrap Modal的DOM操作和Ajax页面替换冲突导致的，下面我帮你拆解原因和解决方案：

你的核心代码 #

先贴出关键代码片段方便分析：

点击事件触发的主Ajax

$("#passMloTag").click(function() {
    var passOrFailOrHandover = "pass";
    var srNumber = $("#srNumber").val();
    var currentStage = $("#currentStage").val();
    var remarksInmloProductionModal = $("#remarksInmloProductionModal").val();
    var assignedOa = $("#assignedOa").val();
    $.ajax({
        type: "POST",
        url: "commonFiles/passFailHandover.php",
        data: {
            passOrFailOrHandover: passOrFailOrHandover,
            srNumber: srNumber,
            currentStage: currentStage,
            remarksInmloProductionModal: remarksInmloProductionModal,
            assignedOa: assignedOa
        },
        success: function(result) {
            callAjax("mloSupervisor.php", "mloProduction");
            var section = "mloProduction"; 
            $("#mloSupervisorProductionModal").modal('toggle');
            $("#success").modal('show');
        }
    });
});

用于页面替换的callAjax函数

function callAjax(pageName, departmentName) {
    var department = departmentName;
    $.ajax({
        type: "POST",
        url: pageName,
        data: { department: department },
        success: function(result) {
            $("#pages").html(result);
        }
    });
}

可能的原因分析 #

1. Modal DOM被意外替换：如果#mloSupervisorProductionModal或者#success Modal是放在#pages容器内部的，那么callAjax执行时会把#pages的内容全部替换掉，导致Modal的DOM元素被移除，但Bootstrap的Modal实例还在运行，残留的遮罩层（.modal-backdrop）会挡住整个页面，看起来就是黑屏无响应。
2. Modal操作和DOM替换同时执行的竞态问题：你在同一时间触发了三个操作：调用callAjax替换页面、切换Modal、显示成功Modal，这三个操作都会修改DOM，Bootstrap的Modal JS逻辑可能因为DOM突变出现异常，导致遮罩层无法正确销毁。
3. 未处理的Modal事件残留：如果Modal的切换没有完成，就执行页面替换，会导致Bootstrap的Modal事件监听残留，引发内存泄漏或逻辑冲突。

解决方案 #

方案1：确保Modal不在#pages容器内

检查你的HTML结构，把所有Modal元素（#mloSupervisorProductionModal、#success）移到#pages外面，这样callAjax替换页面内容时不会影响Modal的DOM结构。这是最根本的解决办法。

方案2：调整操作顺序，等待Modal完全隐藏后再执行页面替换

修改主Ajax的success回调，先等待当前Modal完全隐藏，再执行callAjax和显示成功Modal：

success: function(result) {
    var section = "mloProduction";
    // 先隐藏Modal，监听隐藏完成事件
    $("#mloSupervisorProductionModal").modal('hide').on('hidden.bs.modal', function() {
        // 执行页面替换
        callAjax("mloSupervisor.php", "mloProduction");
        // 显示成功Modal
        $("#success").modal('show');
        // 解绑事件，避免重复触发
        $(this).off('hidden.bs.modal');
    });
}

方案3：手动清理残留的遮罩层（临时应急方案）

如果上面的方案暂时无法生效，可以在操作完成后手动移除残留的遮罩层，不过这只是治标不治本：

// 在callAjax的success回调或者Modal操作后添加
$('.modal-backdrop').remove();
// 同时恢复页面滚动
$('body').removeClass('modal-open');

额外检查点

• 打开浏览器控制台（F12），查看是否有JS报错，比如替换后的HTML存在语法错误，导致后续JS无法执行。
• 检查callAjax返回的HTML内容，是否包含重复的Modal、或者破坏了页面的根结构。

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