Page is still unavailable (covered) after modal window is closed

[Volodymyr Oliinyk]

Hello,

I have a problem with showing two modal windows:
after second window is closed the page is still covered & unavailable.

Test project is attached.
Please select "change password" in menu and click "change".
Then close opened popup and see that the first window is still covered.

Is it a bug with kendo window or I'm using it in the wrong way?

Vova

[Dimo]

Hello Vova,

Please compare your implementation with the following example, which works correctly. I have not debugged your custom code, but it might be breaking some of the default Window behavior and you may need to make some changes.

http://jsfiddle.net/dimodi/nt2XX/

Let me know if you discover any problem in the Window's source.

Regards,
Dimo
the Telerik team

[Volodymyr Oliinyk]

Hello,

I have made very simple project that illustrate this problem with minimum of js code.

    <div id="systemContainer" class="system">

        <input type="button" onclick="showWindow1()" class="k-button accountButton" style="width:100px" value="Show" />

    </div>

 

    <div id="window1" class="alertWindow">

        <div class="contentWindow" style="display:inline"></div>

        <input type="button" class="k-button accountButton" style="width:100px" value="Show" onclick="showWindow2()" />

    </div>

 

    <div id="window2" class="alertWindow">

        <div class="contentWindow" style="display:inline"></div>

    </div>

 

<script type="text/javascript">

    function showWindow1() {

        var wnd = $("#window1").data("kendoWindow");

        wnd.title("Window 1");

        wnd.center();

        wnd.open();

    };

 

    function showWindow2() {

        var wnd = $("#window2").data("kendoWindow");

        wnd.title("Window 2");

        wnd.center();

        wnd.open();

    };

 

    $("#window2").kendoWindow({

    width: "500px",

        height: "160px",

        modal: true,

        draggable: true,

        resizable: false,

        visible: false

    });

 

    $("#window1").kendoWindow({

        width: "500px",

        height: "160px",

        modal: true,

        draggable: true,

        resizable: false,

        visible: false

    });

</script>

From the first looks I think this is Kendo Window problem when you have two windows on the page and initialize the last one first.

Vova

[Dimo]

Hello Vova,

You are right. We have tracked down the cause of the problem and it is now fixed. Changes will take effect in the next internal and official builds.

I have updated your Telerik points.

Regards,
Dimo
the Telerik team

[Volodymyr Oliinyk]

Hello,

There is the same problem with closing windows using "Esc" handler.
If you close all opened model windows by "Esc" button main page is still covered & unavailable.

Please see my test example:
Open two winodws & then press "Esc" button to close them.

Is it a bug or it is impossible to close all model windows by a button?

Vova

[Dimo]

Hello Vova,

Thanks for the runnable example.

The modal background has not been designed to handle scenarios in which several Windows are closed simultaneously. When you close a modal Window, it checks whether there are other open modal Windows and this determines whether the modal background will be removed or not. Due to the closing animation, each Window sees the other currently closing Window as an open (visible) one. The setup will work if you disable Window animation with animation:false. We can change the implementation, so that the modal background is removed after the closing animation, but this will make the behavior look slower.

On a side note, I think that this scenario is not valid from user experience point of view. If I have several open Windows and I press ESC, I will expect only the topmost Window to close, not all of them. If you prefer to continue using this setup, I advise you to remove the modal background manually. Use its CSS class - k-overlay.

Greetings,
Dimo
the Telerik team

[Volodymyr Oliinyk]

Thank you for the quick reply.

It is just an example. ))
In my real case when user closes kendo window (an alert window shown from a dialog) it closes also its parent dialog.
So from the user experience everything is right here.

Also in the real case it sends an event that closes the parent dialog window (not just directly closing).
Can you tell me how to implement this behaviour with windows animation?
I really don't want to remove the windows animation in the whole application because of one this case.

I also can't wait by timeout before alert window is closed and then close parent because in this case application will looks like a slow one.
Removing overlay manually looks like a hack. It is sad if for simple using (and I think this is a quite simple case) new & powerful Kendo library I need to write my own hacks. ((

This is a normal behaviour when one modal window closes another modal window that appears in many applications.
And I'm sure the correct solution for this exists. :)
May be each window should have a flag that it is in the closing animation process and in this case other windows will not see it as an opened one.

Vova

[Dimo]

Hi Vova,

As an alternative to manually removing the modal background, you can call the destroy() method of the two Windows, instead of close(). This will remove the modal background, but it will also remove the Windows and their content from the DOM.

If appropriate, you can simplify the whole procedure by displaying the content of the second Window inside the first one.

Rgards,
Dimo
the Telerik team

[Volodymyr Oliinyk]

Both windows are reusable so they cannot be destroyed (change properties window & common system confirmation window).

Simplification is also impossible because sometimes I need to show confirmation dialog above another modal dialog.
I think it is a simple normal case when a confirmation dialog is shown above a modal dialog and after user make a choose (confirm) both dialogs are closed.

Is it really hard to implement a native support for the logic when two modal windows closed simultaneously?

I don't know the current Kendo window implementation but it seems like window status flag should help to determine window status & correct action for the overlay.
I'm working with JS about a half of my working time and I'm sure it is not so hard to have a native support for this simple & quite a common case.

My current task now is to develop a simple prototype to determine is KendoUI ok for quite big & powerful commercial project and I'm sure if someone will try to develop something more or less big using KendoUI web part he will face the same problem.

Vova

[Dimo]

Hello Vova,

I have logged the discussed behavior in our internal system and we will implement it for some of the next versions of the widget.

All the best,
Dimo
the Telerik team

[Volodymyr]

I have tried new release but it looks like bug is still there...
So if you have more than two opened modal windows in your app forget about the possibility to close them together.

[Volodymyr]

Hello,

Will this bug be fixed or this is by design that closing two modal windows makes overlay lives forever?

With new Q3 version this situation is even worse. When there is a 3 modal windows and user closes two of them fast - overlay covers the last one and it becomes unavailable.

Also there is a new bug in new Q3 beta - modal window overlay shows from time to time and looks like each second time I can have modal window without overlay at all!

Vova

[Dimo]

Hello Vova,

Here is a demo with multiple modal and non-modal windows. It uses the latest Q3 2012 beta scripts. Please provide a step-by-step procedure, which exhibits the unexpected behavior that you described. Feel free to modify the demo if needed.

http://jsfiddle.net/dimodi/HDAtK/

Regards,
Dimo
the Telerik team

[Volodymyr]

1. Problem with overlay is still there.
Create some (three) modal windows (here: http://jsfiddle.net/HDAtK/40/) and then close all of them fast by clicking cross in the corner (do it fast).

You will not be able to close all of them, overlay will cover the last window.

2. Problem with overlay isn't shown all the time is appeared when system closes one window two times (two calls for close).
But I cannot reproduce it in a simple project now. Will try to do it later on with more investigation.
Anyway if I have removed one close call - it helps to solve the problem.

3. Also I have posted there a dataSource problem. I don't know why but after initialization data length is 0.
( you will see an alert box after start )

[Dimo]

Hi Vova,

The Window modality problem is exhibited when you close multiple Windows faster than the closing animation duration. We will fix this for a future version of the widget. In the meantime, you can disable animation or modality as a workaround.

The datasource will contain data after you call its read() method, as stated in the documentation.

Regards,
Dimo
the Telerik team

[Atanu]

Is this modal window issue fixed.
I am still facing the same problem using the version 2012.2.913

Please advise

[Dimo]

Hello Atanu,

The issue is in our to-do list and will be fixed for Q3 2012 SP1. Please use the suggestions in my previous reply. You can also attach a close handler to the Window instances and check whether the modal background has been left visible erroneously, and remove it manually. You will need setTimeout that is greater than the duration of the Window closing animation (e.g. > 400 ms).

Yet another possible workaround is to make it harder for the user to be able to close multiple Windows very quickly, e.g. by making the different Window instances different in size or with a slightly different position on the screen - cascading windows.

Regards,
Dimo
the Telerik team

[Dimo]

The issue is now fixed and changes will take effect in the next internal and official builds.

Greetings,
Dimo
the Telerik team

[Atanu]

Hi

Do you mean fix in  recent Q3 2012 (2012.3.1114) release on 14th of this month.
I am using this version only but still found the problem.

Let me know if I am missing something.

Regards

[Stephen]

I was facing this same problem. The cleanest solution is to use the deactivate event on the first window. Once that has fired, you can then close the second window. Works for me.

[Mike]

Reading this thread it seems like this was solved, except for I am experiencing the same problem with IE8 users. Every other browser seems to work just fine (naturally). I am using the latest build 2013.2.716 with jQuery 1.9.1.  Any suggestions on how to fix this? 

[Dimo]

Hello Mike,

If I understand you correclty, you are referring to the problem that the modality overlay remains visible after closing quickly all Kendo UI Window instances on the page. I can't reproduce this issue in IE8 using the latest Kendo UI version:

http://jsfiddle.net/HDAtK/64/show/

Regards,
Dimo
Telerik

[Andre]

From your sample on http://jsfiddle.net/HDAtK/64/show/ I can see that the kendo modal window close is now working on IE8. How do I call the close action from a button click?

I am using build 2013.2.716 with jQuery 1.9.1. 

[Dimo]

Hello Andre,

Please refer to our documentation, which explains how to obtain the Window client-side object. Once you have it, use its API to close it.

http://docs.kendoui.com/getting-started/web/window/overview#accessing-an-existing-window

http://docs.kendoui.com/api/web/window#methods-close

Regards,
Dimo
Telerik