Close modal window from within the window

[Marc Simkin]

Hi:

Inside my modal window I have a button that I am using the close the window (besides the close bottom on the top).  How can I get the window object so I can call the close method?

You can't get the $("#Window").data("tWindow") since the id "Window" is not defined within the IFrame.

So, how am I supposed to close the window.

thanks

marc

[Dimo]

Hi Marc,

You can achieve the desired behavior by using this code inside the iframe:

<button type="button" onclick="closeWindow(event);">close Window</button>

<script type="text/javascript">

function closeWindow(e)
{
    this.parent.$("#Window").data("tWindow").close();
}

</script>

Note that jQuery has a problem, which results in Javascript errors on page load in IE9 when there is jQuery registered on both the parent page and iframe. The Window closing will still work.

Greetings,
Dimo
the Telerik team

[Marc Simkin]

Hi Dimo:

We tried the close function as you suggested.  It does not work.

The call to get the window object #Window comes back as null.

If you need a sample app please let me know, and I will try to put one together.

thanks

marc

[Dimo]

Hello Marc,

Are the main page and the iframe page in the same domain? I suppose you know that this is required, otherwise the browsers do not allow access due to security restrictions.

Feel free to provide a runnable demo if you need further assistance.

Kind regards,
Dimo
the Telerik team

[Marc Simkin]

My apologies for taking so long to get back to you.  I have attached a sample app that demonstrates what we are seeing.

 

Any insight that you can provide would be appreciated.

 

Thanks

 

marc

[Dimo]

Hello Marc,

The problem is that the Window does not have an ID and the closing statement fails, because this does not return anything:

this.parent.$("#dialogWindow")

The Window does not have a "name" client-side property. The correct way to create the Window, so that it has an ID, is:

function showDialogWindow(url) {
    dialogWindow = $("<div id='dialogWindow'></div>").tWindow({
        contentUrl: url,
        modal: true,
        resizable: false,
        draggable: true,
        scrollable: false,
        width: 520,
        height: 480,
        onClose: function (e) {
            e.preventDefault();
            dialogWindow.data('tWindow').destroy();
        }
    });

    dialogWindow.data('tWindow').center().open();
}

Also, note that you can't use alerts in the closing function for testing, because after the window closes, the second alert has nowhere to be displayed and triggers a Javascript error.

All the best,
Dimo
the Telerik team

[Marc Simkin]

Hi Dimo:

Your example, expects to have a div that has been associated with the Telerik window class as via the server API?

Is that correct?

That is not what I want.  I really want to create the window complete via client side code.  I don't want to worry about if the correct div has been rendered in the HTML for the current page.

marc

[Dimo]

Hi Marc,

This is called a documet fragment:

$("<div id='dialogWindow'></div>")

It is a DOM element, which is created on the fly just before the Window is created, it does not exist before that and you don't have to render it.


Regards,
Dimo
the Telerik team

[Marc Simkin]

Thanks.  That resolved the issue.

Marc

[James]

I'm bouncing this thread to the top because I found myself in the same position and I have found a rather easy workaround.  I am aware that the original poster was creating his window dynamically in Javascript, however if you are not and you need an easy way to close the parent window, I've found this to work the easiest:

$('#btnCloseWindow').live('click', function() {
    $(this).closest('#FilterWindow').data('tWindow').close()
});

In this example, I am simply wiring into the click event of a simple button, grabbing the closest element with the matching id of "FilterWindow", which is the name given to my window control, and closing it there.  And if you are capturing the OnClose event of the window, this will fire as well.

Just wanted to throw this out for the community should someone need to figure this out as I did.