React Reference > Modal Component

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

Usage 

<Page>
    <div> Page content </div>

    <Modal isOpen={this.state.isLoading}>
      Loading ...
    </Modal>
  </Page>

Props

[improve this]
Name Type Description
animation enum 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 func Called just before the modal is displayed. Optional.
onPostShow func Called just after the modal is displayed. Optional.
onPreHide func Called just before the modal is hidden. Optional.
onPostHide func Called just after the modal is hidden. Optional.
visible bool When true the modal will show itself. Optional.
isOpen bool DEPRECATED! Use visible instead. Optional.
onDeviceBackButton func Custom handler for device back button. Optional.

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.