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

Question

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

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

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

编辑：想指出的是，当我调试时，它会告诉我每次关闭模式时它都会回调我的局部视图控制器。所以它完全加载它，包括返回控制器和查询数据库。每次关闭窗口时它实际上都在调用 javascript 方法。

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

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

---

我有一个显示部分视图的模式窗口。每次我单击关闭按钮时，它都会重新打开。我尝试在 javascript 中使用“隐藏”设置它。我尝试了一些完全样板的模态，所以我认为这就是我如何称呼模态的问题。

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

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

这是从控制器中检索到的数据加载模式窗口的 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 -->

是什么导致我的模态窗口每次关闭时都会重新打开。似乎我单击模式的任何地方都会关闭（并重新打开）它。我不知道它是否相关，所以这就是我提出它的原因。我怎样才能让它关闭并保持关闭状态？ 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/