从局部视图加载的模态 window 在关闭时保持打开状态

Question

编辑决赛：除了接受的答案，我还必须弄清楚如何关闭模式，这与在这种情况下隐藏对话框不同。

这一点 javascript 帮助我关闭了模式，隐藏了背景，并将其关闭到可以让我在页面上重新打开另一个不同模式的程度。

<script>
$(document).on("click", ".btnCloseDeviceActivityModal", function () {
    var deviceActivityModal = $('.deviceActivityModal');
    deviceActivityModal.hide();
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();
});
</script>

编辑：想指出的是，当我调试时，它向我显示每次关闭模态时它都会回调到我的部分视图控制器中。所以它正在完全加载它，包括返回控制器和查询数据库。每次我关闭 window.

时，它实际上是在调用 javascript 方法

还想补充一点，我尝试更改为单击按钮的 onclick="doModal()" 方式，并将 javascript 中的方法命名为 doModal()。我在关闭时仍然得到与重新打开相同的行为。

更多的观察是按钮丢失了所有文本，并且在第一次单击后只是一个小方块。我可以在模式的背景中看到这一点。另一个有趣的事情是，每次我单击模态框上的关闭按钮时，模态框的背景（外部）会变得越来越暗。

我有一个显示部分视图的模式 window。每次我单击关闭按钮时，它都会立即重新打开。我试过在 javascript 中用 'hide' 设置它。我尝试了一些完全样板模式，所以我认为问题是我调用模式的方式。

这是通过单击此按钮启动模态的方式：

   <button data-url="@Url.Action("DeviceActivity","Devices", new { @id = item.DeviceId })" class="btn btn-primary btnOpenDeviceActivityModal">Activity</button>

这是从控制器中检索到的数据加载模式 window 的 javascript。它在模态中成功显示局部视图：

@* Display the device activity in a modal window. Data is loaded from the partial View  *@
<script>
$('.btnOpenDeviceActivityModal').click(function () {
    var url = $(this).data("url");

    $(this).load(url, function () {
        $("#deviceActivityModal").modal("show");
    });
})
</script>

虽然看起来无关紧要，但只是为了好玩，这是我的模态局部视图：

<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 id="closeModal" type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
        <div class="modal-body">

            <h2 style="text-align:center">Device Activity Records</h2>

            <table class="table table-striped table-bordered">
                <thead class="thead-light">
                    <tr>
                        <th>
                            Activity Date
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.DeviceActivityRecords)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.ActivityDate)
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

是什么导致我的模式 window 每次关闭时都重新打开。似乎在我点击模式的任何地方都会关闭（并重新打开）它。我不知道它是否相关，所以这就是我提出它的原因。我怎样才能让它关闭并保持关闭状态？ SO 上的其他答案对模态代码有一些明显的问题，但我没有看到我调用模态的方式有什么问题（这似乎是常见问题，因为我完全替换了模态代码进行测试）。

Answer 1

$(this).load 正在按钮内注入模态标记 - 这可能不是您想要的。我假设您打算使用 $.get，它的工作方式确实有点不同。

$('.btnOpenDeviceActivityModal').on('click', function () {
    var url = $(this).data("url");

    $.get(url)
        .done(function (response) {
            $(response).modal("show");
        });
});

这将使用从 AJAX 调用返回的标记作为 .modal() 函数的目标 - 可能想要围绕它添加一些健全性检查。

供参考：

$(selector).load() : https://api.jquery.com/load/

$.get(): https://api.jquery.com/jQuery.get/

从局部视图加载的模态 window 在关闭时保持打开状态

Modal window loaded from partial view keeps opening when closed

html

twitter-bootstrap

bootstrap-modal

asp.net-core

asp.net-core-3.1