ons-modal

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.

Tutorial

See also

Attributes

Name Type Default Value Description
animation String
default
The animation used when showing and hiding the modal. Can be either "none" or "fade". 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.

Properties

Name Description
onDeviceBackButton Back-button handler.
visible Whether the element is visible or not.

Methods Summary

Signature Description
show([options]) Show modal.
toggle([options]) Toggle modal visibility.
hide([options]) Hide modal.

Methods

show([options]): Promise

Show modal.

Returns: Resolves to the displayed element

Parameters
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'}.

toggle([options])

Toggle modal visibility.

Parameters
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'}.

hide([options]): Promise

Hide modal.

Returns: Resolves to the hidden element

Parameters
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'}.

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.