---
title: "Cordova- Dialog Plugin"
description: "This plugin will call platform native dialog UI element.Step 1 - Install Dialog PluginTo install this plugin, open the command prompt window and type"
author: "Anonymous User"
published: 2017-04-26
updated: 2018-03-19
canonical: https://www.mindstick.com/blog/11364/cordova-dialog-plugin
category: "apache cordova"
tags: ["mobile development", "apache", "cordova"]
reading_time: 3 minutes
---
# Cordova- Dialog Plugin
This plugin will call [platform](https://www.mindstick.com/articles/13080/wikipedia-the-most-powerful-advertising-platform-of-the-digital-age) native **dialog UI** element.
**Step 1 - Install Dialog Plugin**
To install this plugin, open the **[command prompt](https://answers.mindstick.com/qa/51716/how-to-make-bootable-pendrive-using-cmd-windows-command-prompt)** window and type the following line of code:
```
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs
```
**Step 2 - Adding Buttons**
open **index.html** file and add four buttons, each one for each type of [dialog box](https://www.mindstick.com/blog/157/dialog-box-in-dot-net).
```
>
```
**Step 3 - Adding [Event Listeners](https://www.mindstick.com/forum/159117/how-do-you-handle-events-using-jquery-and-attach-event-listeners-to-elements)**
Now you have to [add event](https://answers.mindstick.com/qa/93763/how-to-add-event-handlers-on-html-elements-by-javascript) listeners inside **onDeviceReady** function in index.js file. The listeners will trigger the [callback function](https://www.mindstick.com/forum/157808/what-is-a-callback-function-and-how-is-it-used-in-javascript) when the related [button is clicked](https://www.mindstick.com/forum/157821/write-a-jquery-code-that-selects-all-the-checkboxes-in-a-form-when-a-select-all-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](https://www.mindstick.com/forum/160140/explain-the-role-of-functions-as-a-service-faas-in-serverless-computing) 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.
| Alert is dismissed! | index.js:76 |
| --- | --- |
\
**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:
| You clicked1 button ! | index.js:87 |
| --- | --- |
**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.
| You clicked 1 button! | |
| --- | --- |
| You entered Yes I am. . . | index.js:99 |
**\**
**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.
---
Original Source: https://www.mindstick.com/blog/11364/cordova-dialog-plugin
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.