Dialog & Modal

Basic Demo

Parameters can be passed to the modal dialog. In this example the "title" and "additional Title" parameter can be passed. The additional Title is a second separate header above the normal title.

Title Additional Title Disable Outer Left Button Disable Close Icon Without Close Icon Additional Title

Modal with return data

Data from modal dialog is/ can be returned to Opening Component.

Return data:

{{ returnData }}

Modal with delete confirmation


Modal with dynamic disable state

Loader Service as a component within a dialog
To prevent user interactions within a dialog, the Loader Service component can be used as well. While the non-closeable dialog (demo above) only prevents the user to close the dialog with the close icon, background click and ESC key. The Loader Service component additionally displays a loading state. This way the user has an indication that something is being processed.

Modal sizes

These two tables show the minimum/maximum width/height for modals. A differentiation is made between the modals with and without additional title.

VP1 = Viewport 1, VP2 = Viewport2, VP3 = Viewport 3

Without additional Title
Viewport {{ element.viewport }} Min-Width {{ element.minWidth }} Max-Width {{ element.maxWidth }} Min-Height {{ element.minHeight }} Max-Height {{ element.maxHeight }}
With additional Title
Viewport {{ element.viewport }} Min-Width {{ element.minWidth }} Max-Width {{ element.maxWidth }} Min-Height {{ element.minHeight }} Max-Height {{ element.maxHeight }}