View Source Improve this doc

ons-dialog

Dialog that is displayed on top of current screen.

Usage # 

<script>
  ons.ready(function() {
    ons.createDialog('dialog.html').then(function(dialog) {
      dialog.show();
    });
  });
</script>

<script type="text/ons-template" id="dialog.html">
  <ons-dialog cancelable>
    ...
  </ons-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 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

Methods Summary #

Signature Description
show([options]) Show the dialog.
hide([options]) Hide the dialog.
isShown() Returns whether the dialog is visible or not.
destroy() Destroy the dialog and remove it from the DOM tree.
getDeviceBackButtonHandler() Retrieve the back button handler for overriding the default behavior.
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 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 dialog is displayed.
postshow Fired just after the dialog is displayed.
prehide Fired just before the dialog is hidden.
posthide Fired just after the dialog is hidden.

Methods

show([options]) #

Show the dialog.

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

hide([options]) #

Hide the dialog.

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

isShown(): Boolean #

Returns whether the dialog is visible or not.

Returns: true if the dialog is visible.

destroy() #

Destroy the dialog and remove it from the DOM tree.

getDeviceBackButtonHandler(): Object #

Retrieve the back button handler for overriding the default behavior.

Returns: Device back button handler.

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 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 dialog is displayed.

Parameters
Name Type Description
event Object Event object.
event.dialog Object Component object.
event.cancel Function Execute this function to stop the dialog from being shown.

postshow #

Fired just after the dialog is displayed.

Parameters
Name Type Description
event Object Event object.
event.dialog Object Component object.

prehide #

Fired just before the dialog is hidden.

Parameters
Name Type Description
event Object Event object.
event.dialog Object Component object.
event.cancel Function Execute this function to stop the dialog from being hidden.

posthide #

Fired just after the dialog is hidden.

Parameters
Name Type Description
event Object Event object.
event.dialog Object Component object.

Discussion #