从局部视图加载的模态窗口关闭后反复自动打开的问题排查

你遇到的模态窗口关闭后立即重新打开、背景层越来越暗的问题，核心原因在于打开模态框的JavaScript代码错误地将局部视图加载到了触发按钮本身，而不是模态框的内容容器中。

看一下你原来的打开逻辑：

$('.btnOpenDeviceActivityModal').click(function () {
    var url = $(this).data("url");
    $(this).load(url, function () { // 这里的$(this)是触发按钮，你把局部视图加载到按钮里了！
        $("#deviceActivityModal").modal("show");
    });
})

这会导致两个关键问题：

• 每次点击按钮，按钮的HTML内容被替换成模态框的完整代码，相当于按钮变成了模态框的DOM容器。之后点击关闭按钮时，事件冒泡可能触发这个被修改后的按钮的点击事件，导致模态框重新打开。
• 每次加载局部视图，都会向页面中插入一个新的#deviceActivityModal元素，页面中会存在多个模态框实例。关闭时只隐藏了其中一个，剩下的实例会继续触发显示，同时背景层（.modal-backdrop）也会被重复添加，导致背景越来越暗。

1. 修正模态框的加载逻辑 #

首先，你需要把局部视图加载到模态框的内容区域，而不是触发按钮。这里提供两种可行方案：

方案A：页面中保留固定的模态框容器

在主页面中添加一个空的模态框结构，只加载局部视图的内容部分：

<!-- 主页面中的模态框容器 -->
<div class="modal fade" id="deviceActivityModal" style="margin-left:100px; margin-top:80px">
    <div class="modal-dialog-scrollable" style="top:180px; right:200px">
        <div class="modal-content" style="width:1000px; max-height:800px;">
            <div class="modal-header">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
            <div class="modal-body" id="deviceActivityModalBody">
                <!-- 这里会加载局部视图的内容 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

然后修改打开模态框的JavaScript代码，把局部视图加载到#deviceActivityModalBody中：

$('.btnOpenDeviceActivityModal').click(function (e) {
    e.preventDefault(); // 阻止默认行为，避免不必要的跳转
    var url = $(this).data("url");
    $('#deviceActivityModalBody').load(url, function () {
        $("#deviceActivityModal").modal("show");
    });
})

方案B：加载完整的模态框局部视图

如果你希望局部视图包含完整的模态框结构，那么需要确保每次加载前先移除旧的模态框，避免重复：

$('.btnOpenDeviceActivityModal').click(function (e) {
    e.preventDefault();
    var url = $(this).data("url");
    // 先移除旧的模态框（如果存在）
    $('#deviceActivityModal').remove();
    // 把模态框加载到body中
    $('body').load(url, function () {
        $("#deviceActivityModal").modal("show");
    });
})

2. 优化关闭逻辑 #

你的关闭逻辑已经比较完善，这里可以进一步优化，确保彻底清理模态框相关的DOM和类，适配Bootstrap的动画周期：

$(document).on("click", "[data-dismiss='modal'], .btnCloseDeviceActivityModal", function () {
    var $modal = $('#deviceActivityModal');
    $modal.modal('hide'); // 先调用Bootstrap内置的hide方法，触发默认清理逻辑
    setTimeout(function() {
        $modal.remove(); // 彻底移除模态框DOM
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
    }, 300); // 等待Bootstrap的关闭动画完成后再清理
});

3. 避免事件重复绑定 #

改用事件委托的方式绑定打开事件，更稳妥，避免动态生成的按钮无法触发事件：

$(document).on('click', '.btnOpenDeviceActivityModal', function (e) {
    e.preventDefault();
    var url = $(this).data("url");
    $('#deviceActivityModalBody').load(url, function () {
        $("#deviceActivityModal").modal("show");
    });
})

• 按钮首次点击后文本消失：因为你把局部视图加载到按钮里，按钮的原有文本被替换成了模态框的HTML，所以只显示一个小方块（模态框的部分样式）。
• 点击模态窗口任意位置也会触发关闭再打开：因为模态框的DOM被加载到按钮内部，点击模态框区域相当于点击了按钮，触发了打开事件。

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