Adding Modality to the Window
Environment
| Product | Progress® Kendo UI® for Angular Window |
Description
How can I make the Kendo UI for Angular Window modal, just like the Dialog?
Solution
The Window component does not provide built-in modality like the Dialog component. You can implement modality using one of the following approaches.
Simulating Modality
To simulate modality, add a div element with the k-overlay CSS class to your component template. Use the @if control flow to show the overlay only when the Window is open.
@if (opened) {
<div class="k-overlay"></div>
}
<kendo-window [title]="'Window Title'" [(opened)]="opened">
<!-- Window content -->
</kendo-window>The k-overlay class creates a semi-transparent backdrop that prevents interaction with elements behind the Window. The opened property controls both the Window visibility and the overlay display.
The following example demonstrates the complete implementation.
Using the Angular Service
Add modality to a Window when you open it through the WindowService. Manually add the overlay element to the DOM when you open the Window programmatically.
Use this approach to open modal Windows dynamically from your component logic rather than declaratively in templates.
Using a Service Wrapper
Create a custom service that wraps the WindowService to handle overlay creation and removal automatically. The service extends the default WindowService functionality to include modal behavior.
public openServiceWindow(): void {
this.serviceWindowRef = this.modalWindowService.open({
title: 'Service Window with Modal',
...
modal: true, // Custom property for modal behavior
});
}This approach centralizes the modal logic in a single service and makes it reusable across your application. Any component can inject this service and open modal Windows without repeating the overlay management code.
Using a Directive
Create a reusable directive that automatically manages the overlay. The directive adds the overlay when the Window opens and removes it when the Window closes.
Apply the custom modalOverlay attribute to the kendo-window element to activate this behavior:
<kendo-window
[title]="'Window Title'"
[(opened)]="opened"
[modalOverlay]="opened">
<!-- Window content -->
</kendo-window>This approach encapsulates the modal logic in a directive, making it easy to reuse across multiple Window instances.