<Modal />

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.

Tutorial

Using Modal

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.

Props

Name Type Description
animation String
'none'
Animation name. Available animations are "fade", "lift" and "none". Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. Optional.
onPreShow function Called just before the modal is displayed. Optional.
onPostShow function Called just after the modal is displayed. Optional.
onPreHide function Called just before the modal is hidden. Optional.
onPostHide function Called just after the modal is hidden. Optional.
isOpen boolean
false
When true the modal will show itself. Optional.
onDeviceBackButton function Custom handler for device back button. Optional.

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter 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.