Avoid overlay flash with nested modal windows

[Casimodo]

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

[Dimiter Topalov]

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

 

 

[Casimodo]

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

[Casimodo]

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

[Casimodo]

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

[Dimo]

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

[Casimodo]

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