时间戳

首页 > 解决方案 > 改变模态关闭行为

javascript - 改变模态关闭行为

问题描述

谢天谢地，我得到了调试一年前离开我公司的某人的代码的工作。我是 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方法。

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

标签： javascriptjqueryasp.net

解决方案

看起来您正在使用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

推荐阅读