In JavaScript, we get three Dialog boxes. Using these three dialog boxes we can prompt an alert box, get confirmation, and input data from the user.
JavaScript Alert Dialog Box
As the Dialog box name suggests the Alert Dialog box is used to show the alert messages on the user browser. Using the alert dialog box we can also any type of small text message, and it give an OK button to the user to click and continue. To use the alert box we can user
alert()
function.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript">
function message() {
alert ("Alert Message");
document.write("You cicked on the Alert Ok");
}
</script>
</head>
<body>
<p>Click the button to see alert message.</p>
<button onclick = "message();"> Click here to Show Alert</button>
</body>
</html>
Output
Click the button to see alert message. Click here to Show Alert
Confirmation Dialog Box
The Confirmation Dialog box is similar to the alert box, but here the user gets two options
OK
and
cancel.
To use the Confirmation dialog box we can use the
confirm()
function, and it returns a boolean value true or false based on what user clickss OK or cancel.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript">
function vote() {
result =confirm ("Are you 18+");
if(result==true)
document.write("You can vote");
else
document.write("You can not vote")
}
</script>
</head>
<body>
<p>Can vote?</p>
<button onclick = "vote();"> Are you above 18?</button>
</body>
</html>
Output
Can vote.Are you above 18?
Prompt Dialog Box
The Prompt dialog box also creates a pop-up text box, but it is used to get input data from the user. To use the prompt dialog box we can use the
prompt()
function. The prompt() function also pop-up two options
OK
and
Cancel.
If the user fills the prompt box and clicks on the OK button, the prompt() function returns the user-written text value as a string, if the user click on the
Cancel
button the function return null.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript">
function get_name(){
user = prompt("Enter Your name");
if(user)
{
document.write("Your Name is "+user);
}
}
</script>
</head>
<body>
<p>Hello.</p>
<button onclick = "get_name();"> Click here</button>
</body>
</html>
Output
Hello.Click here
Summary
- The alert() function is used to pop up a single option alert box.
- The confirm() function is used to pop up two options confirmation box.
- The prompt() function is used to pop up two options prompt box.