Can't Close SimpleModal Form using $.modal.close()

Question

I have an .aspx page that opens another .aspx page in a pop-up window using Eric Martin's SimpleModal plugin. I can close the pop-up form using the little x in the top right corner but need to also be able to close the form programmatically on a button-click. I am using the recommended $.modal.close() but it doesn't seem to work--the popup does not close.

Here is how I open the form from the parent page in c#:

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

In the code-behind for the pop-up page, in the click event for the button, this is how I am trying to close the pop-up (which doesn't work):

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

My SimpleModal function looks like this:

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

Can anyone tell me what I am doing wrong?

Thanks.

Doing some deeper debugging, I was able to pinpoint the problem to an undefined object in the plugin's close function. I don't know how it could be undefined since I've included the proper libraries and everything else works. Here is the function. The "this.d.data" is what is undefined.

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

It turned out that I had two separate problems which confused the issue. The first problem I had was that I set the last parameter in the RegisterStartupScript to "true". This parameter indicates whether or not to add script tags around the script being registered. Since I already had script tags in my string, I should have set this parameter to "false". Setting it to "true" caused only the starting script tag to be added, but not the ending script tag, which broke my page.

The second issue was with the close statement itself. Since the modal window was opened in the parent page, it was the parent page that contained the instance of the plug-in that needed to do the closing. So in the pop-up itself I had to say "parent.$.modal.close()".

So the corrected line now reads:

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

Closing the modal pop-up window in the click-event of a button on the pop-up window now works like a charm!