Modal component that masks current screen. Underlying components are not subject to any events while the modal component is shown. This component can be used to block user input while some operation is running or to show some information to the user.
A modal component covers the entire screen. Underlying components are not subject to any events while the modal component is shown.
This component can be used to block user input while some operation is running or to show some information to the user.
To show or hide a modal the isOpen property is used. onShow and onHide properties can be specified to handle the related events right after the modal is shown and after the modal is hidden.
| Name | Type | Description |
|---|---|---|
| animation |
String
default |
The animation used when showing and hiding the modal. Can be either "none", "fade" or "lift".
Optional.
|
| animation-options | Expression |
Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}.
Optional.
|
| visible | Boolean | Whether the modal is visible or not. Optional. |
| Name | Description |
|---|---|
| animationOptions |
Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}.
|
| onDeviceBackButton | Back-button handler. |
| visible | Whether the element is visible or not. |
| Signature | Description |
|---|---|
| show([options]) | Show modal. |
| toggle([options]) | Toggle modal visibility. |
| hide([options]) | Hide modal. |
Show modal.
Returns: Resolves to the displayed element
| Name | Type | Description |
|---|---|---|
| options | Object | Parameter object. |
| options.animation | String |
Animation name. Available animations are "none" and "fade".
|
| options.animationOptions | String |
Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
|
| options.callback | Function | This function is called after the modal has been revealed. |
Toggle modal visibility.
| Name | Type | Description |
|---|---|---|
| options | Object | Parameter object. |
| options.animation | String |
Animation name. Available animations are "none" and "fade".
|
| options.animationOptions | String |
Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
|
| options.callback | Function | This function is called after the modal has been revealed. |
Hide modal.
Returns: Resolves to the hidden element
| Name | Type | Description |
|---|---|---|
| options | Object | Parameter object. |
| options.animation | String |
Animation name. Available animations are "none" and "fade".
|
| options.animationOptions | String |
Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
|
| options.callback | Function | This function is called after the modal has been revealed. |
| Name | Description |
|---|---|
| preshow | Fired just before the modal is displayed. |
| postshow | Fired just after the modal is displayed. |
| prehide | Fired just before the modal is hidden. |
| posthide | Fired just after the modal is hidden. |
Fired just before the modal is displayed.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.modal | Object | Component object. |
| event.cancel | Function | Execute this function to stop the modal from being shown. |
Fired just after the modal is displayed.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.modal | Object | Component object. |
Fired just before the modal is hidden.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.modal | Object | Component object. |
| event.cancel | Function | Execute this function to stop the modal from being hidden. |
Fired just after the modal is hidden.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.modal | Object | Component object. |
If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.
For bug reports and feature requests use our GitHub Issues page.