Modal <EModal> ​

A modal is a dialog box/popup window that is displayed on top of the current page.

A modal can be opened by adding the v-modal-open directive to an element or by using the modal.open method of the useElements composable.

Size ​

The modal component allows a size prop. Elements provides CSS rules for the small, default and large size options.

Data ​

Additional data can be passed to the modal. This data is available in the data property of all slots. The data can be any type of value.

Stacking ​

It is possible to open multiple modals. The previous modal is automatically hidden when another modal is opened. When the new modal is closed, the previous will automatically open.

Accessibility ​

The aria-labelledby attribute is automatically set to the modal header element and aria-describedby attribute to the modal body element.

Opening a modal automatically moves the focus to inside the modal. Focus is trapped inside the modal until it is closed. When the modal is closed, Elements tries to restore focus to the element focused prior to opening the modal.

Component Reference ​