Did you find this useful?
Socialize it today.


JavaScript Popup Boxes

Sunday, April 29, 2012

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 kind of popups: Alert, Confirm, and Prompt.


Alert Popup

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 initated, 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>


Confirm Popup

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>


Prompt Popup

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>


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

JavaScript and jQuery: The Missing Manual HTML CSS and JavaScript Editor Professional JavaScript for Web Developers