View Source Improve this doc

ons.notification

Utility methods to create different kinds of alert dialogs. There are three methods available: alert, confirm and prompt.

Usage # 

<script>
  ons.notification.alert({
    message: 'Hello, world!'
  });

  ons.notification.confirm({
    message: 'Are you ready?'
    callback: function(answer) {
      // Do something here.
    }
  });

  ons.notification.prompt({
    message: 'How old are you?',
    callback: function(age) {
      ons.notification.alert({
        message: 'You are ' + age + ' years old.'
      });
    });
  });
</script>

Live Example #

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

Open in New Window

Methods Summary #

Signature Description
alert(options) Display an alert dialog to show the user a message. The content of the message can be either simple text or HTML. Must specify either message or messageHTML.
confirm(options) Display a dialog to ask the user for confirmation. The default button labels are "Cancel" and "OK" but they can be customized. Must specify either message or messageHTML.
prompt(options) Display a dialog with a prompt to ask the user a question. Must specify either message or messageHTML.

Methods

alert(options) #

Display an alert dialog to show the user a message. The content of the message can be either simple text or HTML. Must specify either message or messageHTML.

Parameters
Name Type Description
options Object Parameter object.
options.message String Alert message.
options.messageHTML String Alert message in HTML.
options.buttonLabel String Label for confirmation button. Default is "OK".
options.animation String Animation name. Available animations are "none", "fade" and "slide".
options.title String Dialog title. Default is "Alert".
options.modifier String Modifier for the dialog.
options.callback Function Function that executes after dialog has been closed.

confirm(options) #

Display a dialog to ask the user for confirmation. The default button labels are "Cancel" and "OK" but they can be customized. Must specify either message or messageHTML.

Parameters
Name Type Description
options Object Parameter object.
options.message String Confirmation question.
options.messageHTML String Dialog content in HTML.
options.buttonLabels Array Labels for the buttons. Default is ["Cancel", "OK"].
options.primaryButtonIndex Number Index of primary button. Default is 1.
options.cancelable Boolean Whether the dialog is cancelable or not. Default is false.
options.animation String Animation name. Available animations are "none", "fade" and "slide".
options.title String Dialog title. Default is "Confirm".
options.modifier String Modifier for the dialog.
options.callback Function Function that executes after the dialog has been closed. Argument for the function is the index of the button that was pressed or -1 if the dialog was canceled.

prompt(options) #

Display a dialog with a prompt to ask the user a question. Must specify either message or messageHTML.

Parameters
Name Type Description
options Object Parameter object.
options.message String Prompt question.
options.messageHTML String Dialog content in HTML.
options.buttonLabel String Label for confirmation button. Default is "OK".
options.primaryButtonIndex Number Index of primary button. Default is 1.
options.cancelable Boolean Whether the dialog is cancelable or not. Default is false.
options.animation String Animation name. Available animations are "none", "fade" and "slide".
options.title String Dialog title. Default is "Alert".
options.modifier String Modifier for the dialog.
options.callback Function Function that executes after the dialog has been closed. Argument for the function is the value of the input field or null if the dialog was canceled.

Discussion #