Add Modality to the Window

Unlike the Dialog, the Window does not provide modality out of the box.

Simulating Modality

You can simulate modality for the Window 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.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
      <div class="k-overlay" *ngIf="opened"></div>
      <div class="example-wrapper">
        <button kendoButton (click)="open()">Open window</button>
        <p *ngIf="dataSaved">Data has been saved</p>
        <kendo-window title="Please provide additional data" *ngIf="opened" (close)="close()" [minWidth]="250" [width]="450">

        <form class="k-form">
            <fieldset>
                <legend>User Details</legend>

                <label class="k-form-field">
                    <span>First Name</span>
                    <input class="k-textbox" placeholder="Your Name" />
                </label>
                <label class="k-form-field">
                    <span>Last Name</span>
                    <input class="k-textbox" placeholder="Your Last Name" />
                </label>
            </fieldset>

            <div class="text-right">
                <button type="button" class="k-button" (click)="close()">Cancel</button>
                <button type="button" class="k-button k-primary" (click)="submit()">Submit</button>
            </div>
        </form>

        </kendo-window>
      </div>
    `
})
export class AppComponent {
    public opened = true;
    public dataSaved = false;

    public close() {
        this.opened = false;
    }

    public open() {
        this.opened = true;
    }

    public submit() {
        this.dataSaved = true;
        this.close();
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { WindowModule } from '@progress/kendo-angular-dialog';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, WindowModule, ButtonsModule ]
})
export class AppModule {
}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Using the Angular Service

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

import { Component } from '@angular/core';
import {
    WindowService,
    WindowRef,
    WindowCloseResult
} from '@progress/kendo-angular-dialog';

@Component({
    selector: 'my-app',
    template: `
    <div class="k-overlay" *ngIf="opened"></div>
    <button (click)="openWindow()" class="k-button">Open Modal Window</button>

    <div kendoWindowContainer></div>
  `
})
export class AppComponent {
    constructor(private windowService: WindowService) { }

    public opened = false;

    public openWindow() {
        const window: WindowRef = this.windowService.open({
            title: 'My Window',
            content: 'My Content!',
            width: 450,
            height: 200
        });

        this.opened = true;

        window.result.subscribe((result) => {
            if (result instanceof WindowCloseResult) {
                this.opened = false;
            }
        });
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { WindowModule } from '@progress/kendo-angular-dialog';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, WindowModule, ButtonsModule ]
})
export class AppModule {
}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article