---
title: "How many type of dialog boxes in JavaScript?"  
description: "How many type of dialog boxes in JavaScript?"  
author: "Ravi Vishwakarma"  
published: 2021-07-19  
canonical: https://answers.mindstick.com/qa/93757/how-many-type-of-dialog-boxes-in-javascript  
category: "web application"  
tags: ["javascript", "web application development", "web development"]  
reading_time: 4 minutes  

---

# How many type of dialog boxes in JavaScript?

How many type of [dialog](https://www.mindstick.com/news/2116/after-the-massive-optus-data-breach-hackers-target-singtel-s-dialog-unit) boxes in [JavaScript](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript)?

## Answers

### Answer by user

JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise and alert, or to get confirmation on any input or to have a kind of input from the users. Here we will discuss each dialog box one by one. **Alert Dialog Box** An alert dialog box is mostly used to give a warning message to the users. For example, if one input field requires to enter some text but the user does not provide any input, then as a part of validation, you can use an alert box to give a warning message. Nonetheless, an alert box can still be used for friendlier messages. Alert box gives only one button 'OK' to select and proceed.

```
Example
window.alert('Hello, World!');
```

**Confirmation Dialog Box** A confirmation dialog box is mostly used to take user's consent on any option. It displays a dialog box with two buttons: OK and Cancel. If the user clicks on the OK button, the window method confirm() will return true. If the user clicks on the Cancel button, then confirm() returns false. You can use a confirmation dialog box as follows.

```
Example
 var val=window.confirm('Are you teenager?');
    if(val)
        console.log('Your age is < 18');
    else
        console.log('Your age is > 18');
```

**Prompt Dialog Box** The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables you to interact with the user. The user needs to fill in the field and then click OK. This dialog box is displayed using a method called prompt() which takes two parameters: (i) a label which you want to display in the text box and (ii) a default string to display in the text box. This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the window method prompt() will return the entered value from the text box. If the user clicks the Cancel button, the window method prompt() returns null.

```
Example
var val=window.prompt('What is your name?');
    console.log(val);
```

\

### Answer by Ethan Karla

in javascript have 3 types of dialog boxes. these boxes are used to show an alert message in javaScript. it's used to show the error or confirmation message for the client.

1. Alert Dialog Box
2. Confirmation Dialog Box
3. Prompt Dialog Box

## Alert Dialog Box

An alert box is mostly used to show an error and warning message on the Html page. for example, a login page has required login details but the user doesn't give detail, as a part of validation in the Html page you can show an alert box.

```
<!DOCTYPE html>
<html>
<head>
<script>
function showMsg() {
  window.alert('this is alert box message');
}
</script>
</head>
<body>
<h2>Alert box demo</h2>
<button type='button' onclick='showMsg()'>Alert</button>
</body>
</html>
```

## Confirmation Dialog Box

A Confirmation Dialog Box is mostly used for showing a confirmation box on the Html page. It shows a box with two buttons OK and Cancel. if press the OK button then the return value is true and press the Cancel button then return the false value.

```
<!DOCTYPE html><html><head>
<script>
function showMsg() {
var tag=document.getElementById('res');
  var val=window.confirm('Are you teenager?');
    if(val)
        tag.innerHTML = 'Your age is < 18';
    else
        tag.innerHTML = 'Your age is > 18';
}
</script>
</head>
<body>
<h2>Confirm box demo</h2>
<button type='button' onclick='showMsg()'>Check Me</button>
<p id='res' ></p>
</body>
</html> 
```

## Prompt Dialog Box

The prompt box is very useful when we want to show a popup text field for taking the additional information from the client, also this box has two buttons for submit press OK and no submit press Cancel button.

```
<!DOCTYPE html>
<html>
<head>
<script>
function showMsg() {
var tag=document.getElementById('res');
var retVal = prompt('Enter your name : ', 'Your good name please !!!');
    if(retVal === null || retVal === 'Your good name please !!!'){
     window.alert('Please enter your name !!!');
    }else{
     tag.innerHTML = 'Your good name is ' + retVal;
    }
}
</script>
<style>
 p{
    font-size:35px;
    }
</style>
</head>
<body>
<h2>Prompt box demo</h2>
<button type='button' onclick='showMsg()'>Check Me</button>
<p id='res' ></p>
</body>
</html> 
```

\

\

\


---

Original Source: https://answers.mindstick.com/qa/93757/how-many-type-of-dialog-boxes-in-javascript

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
