Reapply overlay

[Terry Burns-Dyson]

We have a situation whereby we have a modal window which requires the display of a child modal window. Our issue is that on-close of the child window, the modal (t-overaly?) is removed as a whole and the background elements become selectable again. 

The windows are being created via the Client-API, both have been set to modal. Are there any flags that can be passed to tell the second window that it should not remove any modal styling, but behave in a modal fashion itself? Or a method that can be called on the close of the second modal window to re-apply the styling?

[Alex Gyoshev]

Hello Terry,

Thank you for reporting this issue -- we fixed it, and you can find the modified JavaScript attached. Your Telerik points have been updated.

Greetings,
Alex Gyoshev
the Telerik team

[Terry Burns-Dyson]

Is there now an additional flag I have to pass on window create? On the first window I open from the page, as soon as I click close the window goes away but now, the styling remains. 

[Alex Gyoshev]

Hello Terry,

Can you please send the code of your scenario? A working project will be much appreciated.

Kind regards,
Alex Gyoshev
the Telerik team

[Terry Burns-Dyson]

Hi Alex, 

  Please find attached a sample project. There are two different window scenarios;

  Button 1 - Show window, retain handle to window, re-open if clicked again. This does not function well with the modal display.
  Button 2 - (Our actual scenario) On click, the modal window shows, there's a button in there that triggers a further window to show. On closing the child window, the styling for modal is removed and shouldn't be while the parent is open. 

[Alex Gyoshev]

Hello Terry,

The first button did not work because the reference to the window was never saved (hWnd was always null). Once it was, the button started behaving normally. The problem with the overlay is caused by the use of the destroy() method -- it always removed the modal overlay. I am attaching the modified sample project (telerik.window.js is in the ~/Scripts/2010.3.1207 folder).

Regards,
Alex Gyoshev
the Telerik team

[Terry Burns-Dyson]

So, if I run your attached sample project without any changes, I get a undefined in a dynamic script block, with i.data('tWindow') is undefined.

When we need the window to have content loaded at the time we are showing it, is it correct to destroy the window? Or is there a cleaner technique?

[Alex Gyoshev]

Hi Terry,

I am sorry I missed that. The attached solution solves the problem.

A few notes:

• Destroying the window in the onClose event handler does not play its close animation. Purely visual, yet worth making a remark about. A work-around is to destroy in a setTimeout() function.
• Event handlers in the window creation options should be prefixed with "on", i.e. onClose rather than close -- otherwise the close() client-side method is overridden.

Regarding the question of the destruction of the window -- there is a slight overhead in generating and destroying the window on each show -- you can safely create it once and use the show() and hide() methods. If you need to change the window content/title, there are the content() and title() client-side methods. By creating the window once you'll ensure that if the user moves the window on the page, its position will be preserved when she opens it for a second time. The trade-off is, that if the window does not get destroyed, the DOM is a bit heavier -- and this might have a slight performance hit on pages. Therefore -- it's your call.

Regards,
Alex Gyoshev
the Telerik team

[Terry Burns-Dyson]

Thank-you for the help.