Displaying a pop up and blocking the user interaction by configuring it as a modal window

In this recipe, we will look at how the Kendo UI window is created for a DOM node in the page. Later, we will also see how the content of the window is loaded asynchronously by specifying the URL of the page.

How to do it…

Let's create a div element that contains some text that will be shown in the window:

<div id="window">
    Window content goes here...
</div>

The next step is to invoke the kendoWindow function on the preceding DOM node:

$("#window").kendoWindow();

After initializing the DOM node using the kendoWindow function, you will notice that the window contains the text mentioned in the div element that is being shown. Note that this will not add a backdrop. To add a backdrop, the window should be configured as a modal.

The difference between a window and a modal is that a backdrop that hides the body content is shown in the case of a modal. To create the modal window, specify the modal...