ons-alert-dialog

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 <ons-template> tag.

Tutorial

See also

Attributes

Name Type Default Value 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.

Properties

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.
visible Whether the dialog is visible or not.
onDeviceBackButton Back-button handler.

Preset Modifiers

Name Description
material Material Design style
rowfooter Horizontally aligns the footer buttons.

Methods Summary

Signature Description
show([options]) Show the alert dialog.
hide([options]) Hide the alert dialog.

Events Summary

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.

Methods

show([options]): Promise

Show the alert dialog.

Returns: A Promise object that resolves to the displayed element.

Parameters
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([options]): Promise

Hide the alert dialog.

Returns: Resolves to the hidden element

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

Events

preshow

Fired just before the alert dialog is displayed.

Parameters
Name Type Description
event Object Event object.
event.alertDialog Object Alert dialog object.
event.cancel Function Execute to stop the dialog from showing.

postshow

Fired just after the alert dialog is displayed.

Parameters
Name Type Description
event Object Event object.
event.alertDialog Object Alert dialog object.

prehide

Fired just before the alert dialog is hidden.

Parameters
Name Type Description
event Object Event object.
event.alertDialog Object Alert dialog object.
event.cancel Function Execute to stop the dialog from hiding.

posthide

Fired just after the alert dialog is hidden.

Parameters
Name Type Description
event Object Event object.
event.alertDialog Object Alert dialog object.

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.