Reference > v-ons-modal

v-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

Using Modal

VOnsModal 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 visible prop is used. This also works with v-model:visible.

See also

Props

Name Type Description
animation String The animation used when showing and hiding the modal. Can be either "none", "fade" or "lift". Optional.
animationOptions 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.
visible Boolean Specify the visibility of the component. Optional.

Events

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.
deviceBackButton Fired on device back button. Default behavior is NOOP.
preshow

Fired just before the modal is displayed.

Parameters
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.
postshow

Fired just after the modal is displayed.

Parameters
Name Type Description
event Object Event object.
event.modal Object Component object.
prehide

Fired just before the modal is hidden.

Parameters
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.
posthide

Fired just after the modal is hidden.

Parameters
Name Type Description
event Object Event object.
event.modal Object Component object.
deviceBackButton

Fired on device back button. Default behavior is NOOP.

Parameters
Name Type Description
event Object Event object.
event.preventDefault Function Avoids the default behavior.
event.callParentHandler Function Runs the handler for the immediate parent that supports device back button.

Need Help?

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.