New to Kendo UI for Angular? Start a free 30-day trial

Adding Modality to the Window

Environment

ProductProgress® Kendo UI® for Angular Window

Description

How can I make the Kendo UI for Angular Window modal, just like the Dialog?

Solution

Unlike the Dialog, the Window does not provide modality out of the box. However, you can use either of the following approaches to implement the feature in the Window.

Simulating Modality

The following example demonstrates how to simulate modality by adding a div element with the k-overlay CSS class to the page.

    ...
  template: `
      <div class="k-overlay" *ngIf="opened"></div>
      ...
    `

The following example demonstrates the full implementation of the suggested approach.

Example
View Source
Edit In Stackblitz  
Change Theme:

Using the Angular Service

The following example demonstrates how to add modality to a Window that is opened through an Angular service.

Example
View Source
Edit In Stackblitz  
Change Theme: