Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Cordova dialog box

May 21, 2021 Cordova

Table of contents

This plug-in calls the platform local dialog UI element.

Step 1 - Installation dialog box

Type the following in the command prompt window to install the plug-in.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs

Step 2 - Add a button

Let's .html index and add four buttons, each with a button.

<button id = "dialogAlert">ALERT</button>
<button id = "dialogConfirm">CONFIRM</button>
<button id = "dialogPrompt">PROMPT</button>
<button id = "dialogBeep">BEEP</button>>

Step 3 - Add an event listener

Now we'.js the event listener in the onDeviceReady function in index. /b10> Once the corresponding button is clicked, the listener calls the callback function.

document.getElementById("dialogAlert").addEventListener("click", dialogAlert);
document.getElementById("dialogConfirm").addEventListener("click", dialogConfirm);
document.getElementById("dialogPrompt").addEventListener("click", dialogPrompt);
document.getElementById("dialogBeep").addEventListener("click", dialogBeep);	

Step 4A - Create an alert function

Since we've added four event listeners, we'll now .js callback functions for them in the index file. /b10> The first is dialogAlert.

function dialogAlert() {
   var message = "I am Alert Dialog!";
   var title = "ALERT";
   var buttonName = "Alert Button";
   navigator.notification.alert(message, alertCallback, title, buttonName);

   function alertCallback() {
      console.log("Alert is Dismissed!");

If we click the ALERT button, we will see an alert dialog box.

Cordova dialog box

When we click the dialog button, we will get the console output.

Cordova dialog box

Step 4B - Create a confirmation function

The second function we need to create is the dialogConfirm function.

function dialogConfirm() {
   var message = "Am I Confirm Dialog?";
   var title = "CONFIRM";
   var buttonLabels = "YES,NO";
   navigator.notification.confirm(message, confirmCallback, title, buttonLabels);

   function confirmCallback(buttonIndex) {
      console.log("You clicked " + buttonIndex + " button!");

When the CONFIRM button is pressed, a new dialog box pops up.

Cordova dialog box

We'll answer the question by clicking the Yes button. The console output will show the following -

Cordova dialog box

Step 4C - Create a prompt feature

The third function is dialogPrompt. /b10> It allows the user to type text in the dialog input element.

function dialogPrompt() {
   var message = "Am I Prompt Dialog?";
   var title = "PROMPT";
   var buttonLabels = ["YES","NO"];
   var defaultText = "Default"
   navigator.notification.prompt(message, promptCallback, title, buttonLabels, defaultText);

   function promptCallback(result) {
      console.log("You clicked " + result.buttonIndex + " button! \n" + 
         "You entered " +  result.input1);

The PROMPT button triggers this dialog box.

Cordova dialog box

In this dialog box, we have the option to type text. /b10> We'll record this text in the console and click the button.

Cordova dialog box

Step 4D - Create a beep function

The last one is dialogBeep. /b10> This is used to call audio beep notifications. /b11> The times parameter sets the number of repetitions of the beep signal.

function dialogBeep() {
   var times = 2;

When we click the BEEP button, we hear two notification sounds because the secondary value is set to 2.