e8-modal
Updated on Sep 18, 2025 13 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.
Account Information
Update your account details and preferences. Changes will be applied after saving.
<e8-button @click="$refs.modal.show()">Show modal</e8-button>
<e8-modal
ref="modal"
:visible="vars.isVisible"
title="User Settings"
:fullscreen-allowed="true"
>
<!-- Command Bar -->
<e8-modal-command-bar>
<!-- Primary action -->
<e8-modal-action default>
<e8-icon name="floppy"></e8-icon>
<span>Save</span>
</e8-modal-action>
<!-- Secondary action -->
<e8-modal-action outlined>
<e8-icon name="arrow-repeat"></e8-icon>
<span>Refresh</span>
</e8-modal-action>
<!-- Dropdown -->
<e8-modal-dropdown
:outlined="true"
:circle="true">
<template #button-content>
<e8-icon name="three-dots-vertical"></e8-icon>
</template>
<template #default>
<e8-modal-dropdown-action>
<e8-icon name="copy"></e8-icon>
<span>Duplicate</span>
</e8-modal-dropdown-action>
<e8-modal-dropdown-divider></e8-modal-dropdown-divider>
<e8-modal-dropdown-action>
<e8-icon name="trash"></e8-icon>
<span>Delete</span>
</e8-modal-dropdown-action>
</template>
</e8-modal-dropdown>
</e8-modal-command-bar>
<!-- Modal Content -->
<div class="p-4">
<h3 class="mb-2">Account Information</h3>
<p class="text-muted">Update your account details and preferences. Changes will be applied after saving.</p>
<div class="mt-3">
<e8-form-input
label="Name"
placeholder="Enter name"></e8-form-input>
<e8-form-input
label="Email"
placeholder="Enter email"></e8-form-input>
</div>
</div>
</e8-modal>
🔽 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. |