Alert dialog that is displayed on top of the current screen. Useful for displaying questions, warnings or error messages to the user. The title, content and buttons can be easily customized and it will automatically switch style based on the platform.
To use the element it can either be attached directly to the <body> element or dynamically created from a template using the ons.createAlertDialog(template) utility function and the <template> tag.
There are three components used to show dialogs: Dialog, AlertDialog and Toast. The Dialog component is a general dialog where you can put any content. AlertDialog has some default styles that make it easy to show errors, warnings or questions to the user.
And Toast is a message (with optional button) that does not stop the app flow.
To show or hide the dialog the isOpen prop is used.
<Dialog isOpen={this.state.dialogShown}>
Hi!
<Button onClick={this.hideDialog.bind(this)}>
Close
</Button>
</Dialog>
The ons.notification object contains some useful methods to easily show alerts, confirmation dialogs and prompts:
ons.notification.alert(message, options)ons.notificaiton.confirm(message, options)ons.notification.prompt(message, options)ons.notification.toast(message, options)They all return a Promise object that can be used to handle the input from the user.
ons.notification.confirm('Are you ready?')
.then((response) => {
// Handle response.
});
| Name | Type | Description |
|---|---|---|
| modifier | String | The appearance of the dialog. Optional. |
| cancelable | If this attribute is set the dialog can be closed by tapping the background or by pressing the back button on Android devices. Optional. | |
| disabled | If this attribute is set the dialog is disabled. Optional. | |
| animation |
String
default |
The animation used when showing and hiding the dialog. Can be either "none" or "default".
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.
|
| mask-color |
String
rgba(0, 0, 0, 0.2) |
Color of the background mask. Default is “rgba(0, 0, 0, 0.2)”. Optional. |
| visible | Boolean | Whether the alert dialog is visible or not. Optional. |
| Name | Description |
|---|---|
| disabled | Whether the element is disabled or not. |
| cancelable | Whether the dialog is cancelable or not. A cancelable dialog can be closed by tapping the background or by pressing the back button on Android devices. |
| maskColor | Color of the background mask. Default is “rgba(0, 0, 0, 0.2)”. |
| visible | Whether the dialog is visible or not. |
| onDeviceBackButton | Back-button handler. |
| animationOptions |
Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}.
|
| Name | Description |
|---|---|
| material | Material Design style |
| rowfooter | Horizontally aligns the footer buttons. |
| Signature | Description |
|---|---|
| show([options]) | Show the alert dialog. |
| hide([options]) | Hide the alert dialog. |
Show the alert dialog.
Returns: A Promise object that resolves to the displayed element.
| Name | Type | Description |
|---|---|---|
| options | Object | Parameter object. |
| options.animation | String |
Animation name. Available animations are "fade" and "none".
|
| 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 | Function to execute after the dialog has been revealed. |
Hide the alert dialog.
Returns: Resolves to the hidden element
| Name | Type | Description |
|---|---|---|
| options | Object | Parameter object. |
| options.animation | String |
Animation name. Available animations are "fade" and "none".
|
| 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 | Function to execute after the dialog has been hidden. |
| Name | Description |
|---|---|
| preshow | Fired just before the alert dialog is displayed. |
| postshow | Fired just after the alert dialog is displayed. |
| prehide | Fired just before the alert dialog is hidden. |
| posthide | Fired just after the alert dialog is hidden. |
| dialogcancel | Fired when the dialog is canceled. |
Fired just before the alert dialog is displayed.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.alertDialog | Object | Alert dialog object. |
| event.cancel | Function | Execute to stop the dialog from showing. |
Fired just after the alert dialog is displayed.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.alertDialog | Object | Alert dialog object. |
Fired just before the alert dialog is hidden.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.alertDialog | Object | Alert dialog object. |
| event.cancel | Function | Execute to stop the dialog from hiding. |
Fired just after the alert dialog is hidden.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.alertDialog | Object | Alert dialog object. |
Fired when the dialog is canceled.
| Name | Type | Description |
|---|
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.