Avoid overlay flash with nested modal windows

7 posts, 1 answers
  1. Casimodo
    Casimodo avatar
    71 posts
    Member since:
    Mar 2015

    Posted 03 Mar Link to this post

    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

  2. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 07 Mar Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Casimodo
    Casimodo avatar
    71 posts
    Member since:
    Mar 2015

    Posted 08 Mar in reply to Dimiter Topalov Link to this post

    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

  5. Casimodo
    Casimodo avatar
    71 posts
    Member since:
    Mar 2015

    Posted 08 Mar in reply to Casimodo Link to this post

    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

  6. Casimodo
    Casimodo avatar
    71 posts
    Member since:
    Mar 2015

    Posted 09 Mar in reply to Casimodo Link to this post

    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

  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 Mar Link to this post

    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!
  8. Casimodo
    Casimodo avatar
    71 posts
    Member since:
    Mar 2015

    Posted 10 Mar in reply to Dimo Link to this post

    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

Back to Top
Kendo UI is VS 2017 Ready