JavaScript Popup Boxes

Popup boxes are the most useful way of showing a warning or any other important information to website visitors. JavaScript has three different types of popup box available for you to use. They are:
  1. alert()
  2. confirm()
  3. prompt()

alert() - JavaScript MessageBox

An alert dialog box is mostly used to inform or alert the user by displaying some messages in a small dialogue box. It is important to note that the alert() method doesn't have an object name in front of it, because the alert() method is part of the window Object . When an alert box pops up, the user will have to click "OK" to proceed. Syntax
alert('Your message...');
run this source code Browser View


Source
<html> <body> <input type="button" value="Click Here..." onclick="alert('This is an Alert Box');" /> </body> </html>

JavaScript Confirm() Box

A confirmation box is used to let the user make a choice. When Javascript pops up a confirm box , the user will have to click either "OK" or "Cancel" to proceed the next step. Different actions will occur depending on what button the user clicks. You can specify this course of action with conditional logic. Syntax
result = window.confirm(message);
run this source code Browser View


Source
<html> <head> <script type="text/javascript"> function isConfirmed() { var conVal = confirm("Are you ready to confirm?"); if (conVal == true) { val = "Confirmed !!"; } else { val = "Cancelled !!"; } alert(val); } </script> </head> <body> <form> <input type="button" onclick="isConfirmed()" value="Want to confirm ?" /> </form> </body> </html>

JavaScript prompt Box

The alert() method can not interact with the visitor. Javascript Prompt Box is often used if you want the user to enter an input value before proceed to the next step. When Javascript display prompt box , the user will have to click either "OK" or "Cancel" to proceed after entering an input value. The value returned by prompt depends on what exactly the user does with the dialog. If the user types something and then clicks OK or presses Enter, the prompt method returns the user input string. If the user clicks OK or presses Enter without typing anything into the prompt dialog , the method returns the suggested input, as specified in the second argument passed to prompt. If the user dismisses the dialog (e.g. by clicking Cancel or pressing Esc), then in most browsers the prompt method returns null.
run this source code Browser View


Source
<html> <head> <script type="text/javascript"> function promptUser() { var iDay = prompt("Enter any value...", ""); if (iDay != null) { alert("The value you entered is.." + iDay); } else { alert("Should enter value..."); } } </script> </head> <body> <form> <input type="button" onclick="promptUser()" value="Display prompt box.." /> </form> </body> </html>