e8-modal
Updated on Sep 18, 2025 20 minutes to readA modal dialog component with customizable header, footer, and fullscreen support.
Overview
e8-modal provides a flexible modal dialog with optional header, footer, and body content.
It supports fullscreen and maximized modes, dynamic visibility, backdrop click and ESC handling, scrollable content, and responsive layout.
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| body-css-class | Custom CSS class applied to the modal body. | E8CssClassType | — |
| centered | Centers the modal vertically on the screen. | boolean | true |
| fullscreen-allowed | Allows toggling modal between normal and fullscreen mode. | boolean | false |
| no-background | Hides the modal backdrop if true. | boolean | false |
| no-close-on-backdrop | Prevents closing modal when clicking outside its content. | boolean | false |
| no-close-on-esc | Prevents closing modal on ESC key press. | boolean | false |
| no-fade | Disables fade transition animation. | boolean | false |
| scrollable | Enables scrollable modal body content. | boolean | true |
| show-close-button | Controls visibility of the close button in the header. | boolean | true |
| size | Sets modal size. | FormSize | large |
| title | Modal title displayed in the header if no custom header slot is provided. | string | — |
| visible | Controls whether the modal is shown or hidden. | boolean | false |
Slots
| Slot | Description |
|---|---|
| default | Body content of the modal. |
| footer | Custom footer content. |
| header | Custom header content. |
Events
| Event | Description |
|---|---|
| on-before-hide | Fired before the modal is hidden. Returning false or a rejected promise cancels hiding. |
| on-hidden | Fired after the modal is fully hidden. |
| on-hide | Fired when the modal begins hiding. |
| on-screen-mode-change | Fired when the modal toggles fullscreen or normal mode. |
| on-show | Fired when the modal begins showing. |
| on-shown | Fired after the modal is fully shown. |