Question

我有一个.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();
}

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

感谢。

进行更深入的调试，我能够在插件的关闭功能中查明未定义对象的问题。我不知道它是如何被定义的，因为我已经包含了适当的库和其他所有工作。这是功能。＆＃34; this.d.data＆＃34;是未定义的。

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 = {}
        }
    }

Answer 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();
}

此代码重新加载页面并执行第一个代码（弹出窗口），因此每次关闭页面都会显示并再次运行代码，这会让您感受到“模态不关闭”。同样在代码中：

$.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用作关闭模态的链接。

Answer 2

事实证明，我有两个独立的问题混淆了这个问题。我遇到的第一个问题是我将RegisterStartupScript中的最后一个参数设置为“true”。此参数指示是否在要注册的脚本周围添加脚本标记。由于我的字符串中已经有脚本标记，因此我应该将此参数设置为“false”。将其设置为“true”导致仅添加起始脚本标记，但不会添加结束脚本标记，这会破坏我的页面。

第二个问题是关闭声明本身。由于模式窗口是在父页面中打开的，因此它是包含需要执行关闭的插件实例的父页面。所以在弹出窗口中我不得不说“parent。$。modal.close（）”。

所以修正后的行现在显示为：

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

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

无法使用$ .modal.close（）关闭SimpleModal表单

2 个答案: