Modal

Modals are windows used for displaying prompts and subtasks without losing context of the parent application.

Examples

Modals are composed of several parts. To render a modal, include a modal backdrop, modal header, modal body, and modal footer (optional). By default modals are aligned to the top of the page.

Scrollable

Enable scrolling if the height of the modal's content is larger than the modal's content container.

JavaScript

Properties

This component accepts options to configure its behavior.

Option	Default	Description
`animated`	`true`	Enables animation on modal display and hide, and fade effect in the backdrop.
`target`	`null`	Lets the developer refer the target programmatically instead of by data-target attribute. It accepts Element object and xpath selector string.

Methods

Method	Description	Returns
`hide() => void`	Hides the modal	Type: void
`show() => void`	Shows the modal	Type: void
`toggle() => void`	Toggles active state (show/hide)	Type: void

Events

Event	Description
`chiModalShow`	Modal show method has been executed, but the showing animation has not started yet.
`chiModalHide`	Modal hide method has been executed, but the closing animation has not started yet.
`chiModalShown`	Modal has been shown to the user and is fully visible. The animation has completed.
`chiModalHidden`	Modal has been hidden to the user. The animation has completed.

Preventing memory leaks

Modal components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

It is safe to call the modal method more than once, as it will return any previously created modal component associated with the trigger.

Accessibility

Accessibility guidelines coming soon