MVC弹窗调用后端API时保持弹窗不关闭的问题咨询

问题场景 #

在MVC应用的弹窗中，点击OK按钮执行Ajax请求时，弹窗会自动关闭，尝试用$('#exampleModal').modal('show')重新打开会出现闪闭现象。弹窗核心代码及Ajax函数如下：

弹窗HTML：

<div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addUpdateModalModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="padding-bottom: 0px;">
                <h5 class="modal-title custom-model-title-dependent" id="ModalLabel">Mark Acceptable</h5>
                <button type="button" class="btn-close" data-mdb-dismiss="modal" onclick="Dispose()" aria-label="Close"></button>
            </div>
            <div id="dvOperation"></div>
            <div class="col-md-11 text-start mt-2 mx-1" style="display: flex; flex-wrap: wrap;">
                <div class="modal-body" style="padding-top: 0px;">
                    <p class="disability-font-16" style="text-align: justify; font-weight: 400; max-width: 100%; padding-top: 8px">
                        Marking this coverage configuration as acceptable will permanently remove it from this report. Proceed?
                    </p>
                </div>
            </div>
            <div class="modal-footer" Style="padding-right:3rem">
                <button type="button" class="btn btn-sm btn-secondary btn-light" onclick="Dispose(), Continue()">
                    <span class="t-trash icon icon-sm"></span>Cancel
                </button>
                <button data-bs-toggle="modal" data-bs-target="#PageWaiting" onclick=" Continue()" type="button" class="btn btn-sm btn-primary btn-relative" id="saveCoverage">
                    <span class="t-save icon icon-sm"></span>OK
                </button>
            </div>
        </div>
    </div>
</div>

Ajax函数：

function Continue() {
    $.ajax({
        type: "GET",
        data: {id: 123},
        url: '@Url.Action("method", "Controller")',
        success: function (result) {
            if (result.success) { 
                // do something
            }
        },
        error: function (req, status, error) {
        }
    });
}

问题原因 #

OK按钮上的data-bs-toggle="modal" data-bs-target="#PageWaiting"属性会触发Bootstrap的模态框切换逻辑，默认会隐藏当前的exampleModal弹窗，同时打开等待弹窗。后续调用$('#exampleModal').modal('show')时，由于Bootstrap的模态框切换动画尚未完成，会导致弹窗闪闭。

解决方案 #

1. 移除按钮上的自动模态框切换属性，避免触发原弹窗的自动关闭逻辑；
2. 手动控制等待弹窗的显示/隐藏，在Ajax请求开始前打开等待弹窗，请求完成后关闭并展示结果提示；
3. 利用弹窗已有的data-bs-backdrop="static" data-bs-keyboard="false"属性，确保弹窗不会因其他操作意外关闭。

修改后的代码

• 调整OK按钮代码：

<button type="button" class="btn btn-sm btn-primary btn-relative" id="saveCoverage" onclick="Continue()">
    <span class="t-save icon icon-sm"></span>OK
</button>

• 调整Continue函数：

function Continue() {
    // 手动打开等待弹窗
    $('#PageWaiting').modal('show');
    
    $.ajax({
        type: "GET",
        data: {id: 123},
        url: '@Url.Action("method", "Controller")',
        success: function (result) {
            // 关闭等待弹窗
            $('#PageWaiting').modal('hide');
            
            if (result.success) { 
                // 在弹窗内展示成功提示
                $('#dvOperation').html('<div class="alert alert-success mt-2">操作已成功，该配置将从报告中移除。</div>');
                // 如需延迟关闭弹窗，可添加以下代码
                // setTimeout(() => $('#exampleModal').modal('hide'), 3000);
            } else {
                // 展示失败提示
                $('#dvOperation').html('<div class="alert alert-danger mt-2">操作失败，请重试。</div>');
            }
        },
        error: function (req, status, error) {
            // 关闭等待弹窗
            $('#PageWaiting').modal('hide');
            // 展示请求错误提示
            $('#dvOperation').html('<div class="alert alert-danger mt-2">请求失败，请检查网络后重试。</div>');
        }
    });
}

效果说明 #

修改后，点击OK按钮时原弹窗不会自动关闭，等待弹窗会在Ajax请求期间显示，请求完成后关闭等待弹窗并在原弹窗内展示结果提示，完全避免闪闭问题。

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