This is a migrated thread and some comments may be shown as answers.

Avoid overlay flash with nested modal windows

6 Answers 632 Views
Window
This is a migrated thread and some comments may be shown as answers.
Casimodo
Top achievements
Rank 1
Casimodo asked on 03 Mar 2016, 08:19 PM

Hi,

when opening nested modal windows, the overlay flashes quite fireworkish since the overlay's background-color changes abruptly from dark to light before being animated back to a dark.

I found an example dojo: http://dojo.telerik.com/@naskog/AhIQI

Is there any way to avoid this? Does Kendo UI keep track of the nesting level of modal windows, so it could behave differently for modal windows at deeper levels? I wouldn't mind if the overlay would be applied only to the first modal, just to get rid of the flashing.

Regards

Kasimier Buchcik

6 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 07 Mar 2016, 12:47 PM
Hi Casimodo,

The described flashing occurs, because each Kendo UI Window instance triggers the overlay animation of the widget, regardless of other Window instances on the page.

A possible workaround is to create a new CSS rule that forces the overlay's opacity to not change, and attach and remove a custom class (e.g. "opening") to/from the body as necessary (based on the provided dojo):

CSS:

.opening .k-overlay {
    opacity: .5 !important;
}

JavaScript:

function showWindow2() {
var wnd = $("#window2").data("kendoWindow");
wnd.title("Window 2");
wnd.center();
$(document.body).addClass("opening");
wnd.open();
$(document.body).removeClass("opening");
};

Let me know if this helps.

Regards,
Dimiter Topalov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Casimodo
Top achievements
Rank 1
answered on 08 Mar 2016, 05:32 PM

Hi Dimiter,

thanks! Your approach does work for me. Lucky me, I'm using a code generator to build my Kendo UI views and models, thus I was able to inject your approach into my machinery using the following functions.

kendomodo._modalWindowsCount = 0;
 
kendomodo.setModalWindowBehavior = function (wnd) {
 
    wnd.one("open", function (e) {
        _onModalWindowOpening(e);
    });
 
    wnd.one("activate", function (e) {
        _onModalWindowActivated(e);
    });
 
    wnd.one("close", function (e) {
        _onModalWindowClosed(e);
    });
};
 
kendomodo.onModalWindowOpening = function (e) {
    _onModalWindowOpening(e);
};
 
kendomodo.onModalWindowActivated = function (e) {
    _onModalWindowActivated(e);
};
 
kendomodo.onModalWindowClosed = function (e) {
    _onModalWindowClosed(e);
};
 
function _onModalWindowOpening(e) {
    kendomodo._modalWindowsCount++;
 
    if (kendomodo._modalWindowsCount > 1) {
        $(document.body).addClass("opening-modal-window");
    }
}
 
function _onModalWindowActivated(e) {
    if (kendomodo._modalWindowsCount > 1) {
        $(document.body).removeClass("opening-modal-window");
    }
};
 
function _onModalWindowClosed(e) {
    kendomodo._modalWindowsCount--;
};

Regards & thanks

Kasimier Buchcik

0
Casimodo
Top achievements
Rank 1
answered on 08 Mar 2016, 07:31 PM

Initially this didn't work for me, because the "activate" event was never fired. Then I learned that one has to configure the window with visible = false in order to allow for the "activate" event to be fired. Works fine now.

Here's an example dojo: http://dojo.telerik.com/Uhiza/2

Regards,

Kasimier Buchcik

0
Casimodo
Top achievements
Rank 1
answered on 09 Mar 2016, 11:50 AM

Unfortunately there's a issue with the grid popup window's close event. Thus I'm not able yet to fully implement this behavior.

See http://www.telerik.com/forums/grid-popup-editor's-close-event-fired-twice

Regards

Kasimier Buchcik

0
Dimo
Telerik team
answered on 10 Mar 2016, 01:37 PM
Hi Kasimier,

I see a colleague of mine has already replied in the mentioned forum thread. In case you have additional questions related to the Grid and its popup window behavior, please post them there. If you have additional questions on this thread's original topic, post them here. Thank you.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Casimodo
Top achievements
Rank 1
answered on 10 Mar 2016, 06:51 PM

Hi Dimo,

this issue is resolved for me. The remaining bit related to the grid's popup window was resolved by Konstantin Dikov, who pointed out that one should bind to the "deactivate" event instead of the "close" event due to a bug in the grid.

Regards & thanks

Kasimier Buchcik

Tags
Window
Asked by
Casimodo
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Casimodo
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or