This plugin will call platform native dialog UI element.

Step 1 - Install Dialog Plugin

To install this plugin, open the command prompt window and type the following line of code:

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

open index.html file and add four buttons, each one for each type of dialog box.

<button id = "Alertdialog">ALERT</button>

<button id = "Confirmdialog">CONFIRM</button>

<button id = "Promptdialog">PROMPT</button>

<button id = "Beepdialog">BEEP</button>>

 Step 3 - Adding Event Listeners

Now you have to add event listeners inside onDeviceReady function in index.js file. The listeners will trigger the callback function when the related button is clicked.

document.getElementById("Alertdialog").addEventListener("click", Alertdialog);

document.getElementById("Confirmdialog").addEventListener("click", Confirmdialog);

document.getElementById("Promptdialog").addEventListener("click", Promptdialog);

document.getElementById("Beepdialog").addEventListener("click", Beepdialog); 

Step 4A - Create Alert Function

Since we added four event listeners, we will now create callback functions for all of them in index.js. The first one is Alertdialog.

function Alertdialog () {

   var message = "I am Alert Dialog!";

   var title = "ALERT";

   var buttonName = "Alert Button";

   navigator.notification.alert(message, alertCallback, title, buttonName);

   function alertCallback() {F

      console.log("Alert is Dismissed!");

   }  

}

When you will click ALERT button, you will see alert dialog box.

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

Step 4B - Creating Confirm Function

The second function you need to create is Confirmdialog function.

function Confirmdialog () {

   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 CONFIRM button is pressed, the new dialog will pop up.

When you click YES button to answer the question. The console output will show the following:

Step 4C - Creating Prompt Function

The third function is Promptdialog. It provides users to input text into dialog input element.

function Promptdialog () {

   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 will trigger this dialog.

In this dialog we have option to type the text. We will log this text in console, together with button that is clicked.

Step 4D - Creating Beep Function

The last one is Beepdialog. This is used for calling audio beep notification. The times parameter will set number of iterations for the beep signal.

function Beepdialog () {

   var times = 2;

   navigator.notification.beep(times);

}

When we click BEEP button, we will hear notification sound twice, since times value is set to 2.