无法使用 $.modal.close() 关闭 SimpleModal 表单答案

【问题标题】：Can't Close SimpleModal Form using $.modal.close()无法使用 $.modal.close() 关闭 SimpleModal 表单
【发布时间】：2014-07-16 19:36:33
【问题描述】：

我有一个 .aspx 页面，它使用 Eric Martin 的 SimpleModal 插件在弹出窗口中打开另一个 .aspx 页面。我可以使用右上角的小 x 关闭弹出表单，但还需要能够通过单击按钮以编程方式关闭表单。我正在使用推荐的 $.modal.close() 但它似乎不起作用——弹出窗口没有关闭。

这是我在 c# 中从父页面打开表单的方法：

ClientScript.RegisterStartupScript(this.Page.GetType(), "Popup", "$(document).ready(function () {simpleModal('555','300','mypopuppage.aspx');});", true);

在弹出页面的代码隐藏中，在按钮的点击事件中，这就是我试图关闭弹出窗口的方式（这不起作用）：

ClientScript.RegisterStartupScript(this.Page.GetType(), "ClosePopUp", "<script type='text/javascript'>$.modal.close();</script>", true);

我的 SimpleModal 函数如下所示：

function simpleModal(smWidth, smHeight, smLink) {
    var str = '<iframe id="modaliframe" src="' + smLink + '" height="' + smHeight + '" width="' + smWidth + '" style="border:0">';

    $.modal(str, {
        closeHTML: "<a href='#' class='close' alt='Close' title='Close'></a>",
        containerCss: {
            backgroundColor: "#fff",
            height: smHeight,
            padding: 0,
            width: smWidth
        },
        overlayClose: false,
        closeClass: "close",
        onClose: refreshParent,
        onShow: bindLoginButtons
    });

    return false;
}

function refreshParent() {
    window.location.reload(true);
    $.modal.close();
}

谁能告诉我我做错了什么？

谢谢。

做了一些更深入的调试，我能够将问题定位到插件关闭函数中的未定义对象。我不知道它怎么可能是未定义的，因为我已经包含了正确的库并且其他一切都有效。这是功能。 “this.d.data”是未定义的。

close: function () {
        if (!this.d.data) return !1;
        this.unbindEvents();
        if (b.isFunction(this.o.onClose) && !this.occb) this.occb = !0, this.o.onClose.apply(this, [this.d]);
        else {
            if (this.d.placeholder) {
                var a = b("#simplemodal-placeholder");
                this.o.persist ? a.replaceWith(this.d.data.removeClass("simplemodal-data").css("display", this.display)) : (this.d.data.hide().remove(), a.replaceWith(this.d.orig))
            } else this.d.data.hide().remove();
            this.d.container.hide().remove();
            this.d.overlay.hide();
            this.d.iframe && this.d.iframe.hide().remove();
            this.d.overlay.remove();
            this.d = {}
        }
    }

【问题讨论】：

尝试检查示例的源代码
你可以试试：$("#modaliframe").dialog("close");
谢谢，Dasha，很遗憾那没有用。

标签： c# jquery asp.net simplemodal

【解决方案1】：

主要问题是当您使用以下代码时：

ClientScript.RegisterStartupScript(this.Page.GetType(), "Popup", "$(document).ready(function () {simpleModal('555','300','mypopuppage.aspx');});", true);

javascript先运行，但是当你使用代码时：

function refreshParent() {
  window.location.reload(true);
  $.modal.close();
}

此代码重新加载页面并执行第一个代码（Popup），因此页面的每次关闭都会重新加载并再次运行代码，这会给您一种“模式未关闭”的感觉。同样在代码中：

$.modal(str, {
    closeHTML: "<a href='#' class='close' alt='Close' title='Close'></a>",
    containerCss: {
        backgroundColor: "#fff",
        height: smHeight,
        padding: 0,
        width: smWidth
    },
    overlayClose: false,
    closeClass: "close",
    onClose: refreshParent,
    onShow: bindLoginButtons
});

你需要改变这个：

closeHTML: "<a href='#' class='close' alt='Close' title='Close'>Close</a>",

所以Close这个词被用作关闭模态的链接。

【讨论】：

不幸的是，即使我删除了“重新加载”语句，弹出窗口也不会关闭。为了更好地衡量，我还一起删除了 refreshParent 功能，但没有帮助。至于在链接中添加“关闭”一词，则没有必要，因为 SimpleModal 插件使用“closeHTML”和“closeClass”在右上角添加一个小“x”来关闭窗口.那部分有效。这只是我的按钮单击的代码隐藏不起作用。
也许你需要使用 ScriptManager.RegisterClientScriptBlock 代替。这是一个示例链接：link
我发现了更多信息并将其添加为上面的编辑。

【解决方案2】：

事实证明，我有两个不同的问题，这混淆了这个问题。我遇到的第一个问题是我将 RegisterStartupScript 中的最后一个参数设置为“true”。该参数表示是否在正在注册的脚本周围添加脚本标签。因为我的字符串中已经有脚本标签，所以我应该将此参数设置为“false”。将其设置为“true”只会添加开始脚本标记，而不是结束脚本标记，这会破坏我的页面。

第二个问题是 close 语句本身。由于模态窗口是在父页面中打开的，因此需要关闭的是包含插件实例的父页面。所以在弹出窗口本身我不得不说“parent.$.modal.close()”。

所以更正后的行现在是：

ClientScript.RegisterStartupScript(this.Page.GetType(), "ClosePopUp", "<script type='text/javascript'>parent.$.modal.close();</script>", false);

现在在弹出窗口上的按钮的单击事件中关闭模式弹出窗口就像一个魅力！

【讨论】：