JavaScript Popup Boxes

JavaScript provides you with the ability to create popup messages to interact with your users. The popups are dialogue boxes that take the focus away from the current window. The popups will appear in front of the browser.

These alerts should be used sparingly. When used in excess, users become generally annoyed with them. The use of the popups is generally acceptable in these types of situations:

An error has occurred and you want to inform the user of the problem.
Asking users for confirmation before a specific action is taken to validate their input.

JavaScript has three kinds of popups: Alert, Confirm, and Prompt.

An alert popup is used if you want to provide the user with some information that is important to know about. When an alert popup is initiated, the user will have to click OK to proceed.

alert("string text");

The alert() method is supported by all major browsers. Here is an example of how to use the alert() method.

<html>
<head>
    <script type="text/javascript">
        function displayAlert() {
            alert("Hello!");
        }
    </script>
</head>
<body>
    <input type="button" onclick="displayAlert()" value="Display Alert" />
</body>
</html>

The confirm popup is similar to the alert popup but provides the user with a choice. The user can either confirm by clicking on OK, or the user can click on the Cancel button to cancel the request. OK returns true and cancel returns false, back to the JavaScript code block.

confirm("string text");

The confirm() method is supported by all major browsers. Here is an example of how to use the confirm() method.

<html>
<head>
    <script type="text/javascript">
        function displayConfirm() {
            var r=confirm("Press a button");
            if (r==true) {
                alert("You pressed OK!");
            } else {
                alert("You pressed Cancel!");
            }
        }
    </script>
</head>
<body>
    <input type="button" onclick="displayConfirm()" value="Display Confirm" />
</body>
</html>

The prompt popup box is rarely implemented these days. In the early days of web development, the prompt popup was used to collect information from the user. Modern web development techniques would not include the use of this method to collect information.

Interaction with the user is normally done through input elements and server side scripting handles the processing of the data provided by the user. In any case, you should be aware of the syntax and use of this method.

prompt("string text","default value"); //default value-optional

The prompt() method is supported by all major browsers. Here is an example of how to use the prompt() method.

<html>
<head>
    <script type="text/javascript">
        function displayPrompt() {
            var x=prompt("Please enter your name","John Smith");
            if (x!=null && x!="") {
              alert("Hello " + x + "! How are you?");
            }
        }
    </script>
</head>
<body>
    <input type="button" onclick="displayPrompt()" value="Display Prompt" />
</body>
</html>