Back to: JavaScript Tutorial For Beginners and Professionals
JavaScript Popup Boxes with Examples
In this article, I am going to discuss JavaScript Popup Boxes with Examples. Please read our previous article where we discussed JavaScript Recursive Functions in detail. At the end of this article, you will understand the What are JavaScript Popup Boxes and when and how to create and use Popup Boxes in JavaScript with examples.
In JavaScript there are 3 types of popup boxes.
- Alert box
- Confirmation box
- Prompt box
Alert Box in JavaScript
- Alert box is a dialog box which displays a message in a small window with an OK button, it is used, and when we want to make sure the information is coming via user.
- User have to click to OK button to proceed.
- Alert box with text and [OK] button
- Just a message shown in a dialog box:
Syntax:
alert(“text goes here”);
Example to understand JavaScript Alert:
<html>
<head>
</head>
<body>
<script type="text/javascript">
alert("Hit me to proceed!");
document.write("Have a Nice day!!!")
</script>
</body>
</html>
Output:
Confirmation box in JavaScript
- Contains text, [OK] button and [Cancel] button
- Confirm box is a dialog box which displays a message in a small window with two buttons. One OK and other Cancel.
- It is used when we want the user to confirm/verify something.
- When user clicks OK the box returns true else when user clicks Cancel the box returns false.
Syntax:
confirm(“test goes here”);
Example to understand JavaScript Confirmation Box:
<html>
<head>
</head>
<body>
<script type="text/javascript">
a = confirm(" Want to Proceed ?");
document.write("Your have clicked on : " + a);
</script>
</body>
</html>
Output:
JavaScript Prompt Box
- Contains text, input field with default value
- Prompt box is a dialog box which displays a message in a small window with a text box along with two buttons. One OK and other Cancel.
- It is used when we want the user to input a value before proceeding ahead.
- When a user clicks OK the box returns the input value else when user clicks Cancel the box return null
Syntax:
prompt(“text goes here”, “default value”);
Example to understand Prompt Box in JavaScript:
<html>
<head>
</head>
<body>
<script type="text/javascript">
a = prompt("Enter your name", "Shagufta");//with default value assigned
a = prompt("Enter your name", "");//without default value
document.write("Your have entered : " + a);
</script>
</body>
</html>
Output:
With default value:
Without default value:
In the next article and in few upcoming articles, I am going to discuss JavaScript Events in detail with examples. Here, in this article, I try to explain JavaScript Popup Boxes with example. I hope this JavaScript Popup Boxes with example article will helps you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.