Search code examples
kendo-uiwindowscrollevent-bubbling

Kendo Window Scrolling background window

I have a kendo window popping up with info that the user can scroll through. When the bottom/top of this window is reached via mouse scrolling, the background window then begins to scroll. I want to be able to turn off this functionality without...

A) making the kendo window modal

B) setting overflow to hidden on the HTML->Body while the window is open

Solution

  • For making the window modal use the property modal : true, for controlling the scroll when opening and restore when close use open and close event handlers.

    var win = $("#win").kendoWindow({
    modal: true,
    open: function (e) {
        $("body").addClass("ob-no-scroll");
    },
    close: function(e) {
        $("body").removeClass("ob-no-scroll");
    }
}).data("kendoWindow");

    In my case I've added a CSS definition called ob-no-scroll and then I add / remove it when open / close event are fired.

    This CSS definition looks like:

    .ob-no-scroll { 
    overflow: hidden;
}

    Example here : http://jsfiddle.net/OnaBai/HkwLS/