JavaScript Popup Boxes

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:

JavaScript Alert Box

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 Confirmation Box

JavaScript Popup Boxes with  Examples

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:

JavaScript Prompt Box with Default Value

Without default value:

JavaScript Prompt Box without Default Value

JavaScript Popup Boxes

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 examples. I hope this article will helps you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *