改变模态关闭行为

Question

感谢我的工作是调试一年前离开我公司的某人的代码。我是 jquery 的新手，我正在为手头的任务而苦苦挣扎。

该应用程序是一个商店/库存管理 ASP.NET 应用程序。有一个概述页面，其中列出了所有商店。您可以编辑商店。所以它的功能是：

$(document).on('click', '.js-open-edit-modal', function () {
    $("#EditWinkelModal").load("/Winkels/Details/" + $(this).data("id"), function () {
        $("#modal-winkel-edit").modal();
    });
});

打开一个模式。到目前为止一切正常。问题是当用户关闭模式时。这可以通过按右上角的“X”、按转义键、单击模态框外或按一个按钮来完成，定义为

<button type="button" class="c-btn c-btn--secondary" modal-close>Annuleer</button>

发生的情况是这只隐藏了模式（将“显示”设置为“无”。它不会删除添加的代码。所以现在，当用户编辑另一个商店时，更多的代码会添加到页面中。并且代码冲突。 这是 Chrome 检查的图片，在我编辑了一些商店之后（在我的语言/荷兰语中称为“winkel”）

我已经找到了解决按钮问题的方法。我刚改成

<button type="button" class="c-btn c-btn--secondary"  id="cancelWinkelAdd">Annuleer</button>

并添加代码

$(document).on('click', '#cancelWinkelEdit', function () {
    $.modal.close();
    var element = $("#modal-winkel-edit")[0];
    element.parentNode.removeChild(element);
});

但这只能解决按钮的问题。所有其他关闭选项（如上所述）仍然存在问题。所以现在我正在寻找一种方法来覆盖这个close-modal 方法。

我应该怎么做，或者有更好的解决方案吗？

Answer 1

看起来您正在使用jQuery-modal，jQuery-modal 有一个通过某些操作触发的事件列表。您可以监听模式关闭时触发的事件。

$.modal.AFTER_CLOSE = 'modal:after-close';
// Fires after the modal has fully closed (including animations).

并在调用此事件时从 DOM 中删除模态

$('#example-modal').on($.modal.AFTER_CLOSE, function(event, modal) {
    modal.remove(); // <-- delete the modal from the DOM
});

更多信息可以在这里找到：https://github.com/kylefox/jquery-modal#events