View Source Improve this doc

ons-alert-dialog

Alert dialog that is displayed on top of the current screen.

Usage # 

<script>
  ons.ready(function() {
    ons.createAlertDialog('alert.html').then(function(alertDialog) {
      alertDialog.show();
    });
  });
</script>

<script type="text/ons-template" id="alert.html">
  <ons-alert-dialog animation="default" cancelable>
    <div class="alert-dialog-title">Warning!</div>
    <div class="alert-dialog-content">
      An error has occurred!
    </div>
    <div class="alert-dialog-footer">
      <button class="alert-dialog-button">OK</button>
    </div>
  </ons-alert-dialog>
</script>

Live Example #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

Open in New Window

See also #

Attributes #

Name Type
Default Value		 Description
var String Variable name to refer this alert dialog. Optional
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. 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
mask-color String
rgba(0, 0, 0, 0.2) 		Color of the background mask. Default is "rgba(0, 0, 0, 0.2)". Optional
ons-preshow Expression Allows you to specify custom behavior when the "preshow" event is fired. Optional
ons-prehide Expression Allows you to specify custom behavior when the "prehide" event is fired. Optional
ons-postshow Expression Allows you to specify custom behavior when the "postshow" event is fired. Optional
ons-posthide Expression Allows you to specify custom behavior when the "posthide" event is fired. Optional
ons-destroy Expression Allows you to specify custom behavior when the "destroy" event is fired. Optional

Preset Modifiers #

Modifier Description
android Display an Android style alert dialog.

Methods Summary #

Signature Description
show([options]) Show the alert dialog.
hide([options]) Hide the alert dialog.
isShown() Returns whether the dialog is visible or not.
destroy() Destroy the alert dialog and remove it from the DOM tree.
setCancelable(cancelable) Define whether the dialog can be canceled by the user or not.
isCancelable() Returns whether the dialog is cancelable or not.
setDisabled(disabled) Disable or enable the alert dialog.
isDisabled() Returns whether the dialog is disabled or enabled.
on(eventName, listener) Add an event listener.
once(eventName, listener) Add an event listener that's only triggered once.
off(eventName, [listener]) Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

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]) #

Show the alert dialog.

Parameters
Name Type Description
options Object Parameter object.
options.animation String Animation name. Available animations are "fade", "slide" and "none".
options.callback Function Function to execute after the dialog has been revealed.

hide([options]) #

Hide the alert dialog.

Parameters
Name Type Description
options Object Parameter object.
options.animation String Animation name. Available animations are "fade", "slide" and "none".
options.callback Function Function to execute after the dialog has been hidden.

isShown(): Boolean #

Returns whether the dialog is visible or not.

Returns: true if the dialog is currently visible.

destroy() #

Destroy the alert dialog and remove it from the DOM tree.

setCancelable(cancelable) #

Define whether the dialog can be canceled by the user or not.

Parameters
Name Type Description
cancelable Boolean If true the dialog will be cancelable.

isCancelable(): Boolean #

Returns whether the dialog is cancelable or not.

Returns: true if the dialog is cancelable.

setDisabled(disabled) #

Disable or enable the alert dialog.

Parameters
Name Type Description
disabled Boolean If true the dialog will be disabled.

isDisabled(): Boolean #

Returns whether the dialog is disabled or enabled.

Returns: true if the dialog is disabled.

on(eventName, listener) #

Add an event listener.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

once(eventName, listener) #

Add an event listener that's only triggered once.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

off(eventName, [listener]) #

Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

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 #