Javascript Popup Boxes

Javascript dialog or popup boxes are of three types:

  • Alert Box
  • Prompt Box
  • Confirm Box

These Popup boxes are used to create alerts,take input from the user,get confirmation etc.

Alert Box

It is a simple pop up box in javascript.
It is used to give warning or alert the user.If the user is submitting a form and required field is
left blank then you can alert the user by displaying a message on the screen.
The user will have to click “OK” to proceed.
Example:

<head>
<script type="text/javascript">
function alert_box()
 {
  alert("This is an alert box");
 }
</script>
</head>
<body>
<form>
<input type="button" value="alert box" onclick="alert_box()"/>
</form>
</body>
  

Click on the button.

Alert box can also be displayed when a link is clicked by the user.

<html>
<body>
<a href="javascript:onclick=alert('An alert box')">
Click here to display an alert box </a>
</body>
</html>
 
 
 Click here to display an alert box 

 Note:Onclick is an event which is used to respond to a mouse click.There are
 also other events such as onhover,onload,onfocus etc.These come under HTML DOM Events.

Prompt Box

The Prompt box is also a Window Object like alert() and is used to take user input in a text field.
It is similar to the alert box except that it has two button “OK” and “Cancel” while Alert() has only one button “OK”.

  • The label which you want the user to enter
  • The value that you want to be displayed in a text box

Syntax Of Prompt Box:
Prompt Box(“Label”,”Default Value”)

<head>
<script type="text/javascript">
function Prompt_Box()
  {
   var name=prompt("Enter your name:","Billgates");
   alert("Your name is: " + name);   
  }
</script>
</head>
<body>
<form>
<input type="button" value="Prompt Box" onclick="Prompt_Box()"/>
</form>
</body>

This information can be stored in a variable and you can identify the visitor the next time he visits
the portal.
Note:If the user returns “OK” then the text box returns the value else it returns “NULL”.

Confirm Box

It is used to verify something from the user.It is similar to the alert box but it contains
two buttons “OK” and “Cancel”.If the user clicks “OK” then it returns true else it returns false.

<head>
<script type="text/javascript">
function Confirm_Box()
{
  var reply=confirm("Do you wish to continue?");
  if(reply==true)
   {
    alert("You replied OK");
   }
  else
   {
    alert("You replied Cancel");
   }  
}
</script>
</head>
<body>
<form>
<input type="button" value="confirm box" onclick="Confirm_Box()"/>
</form>
</body>

Note:Alert(),Prompt,Confirm() are all methods of the Window Object.There are also other methods such
as createPopup(),focus(),Print(),scrollBy() etc.

css.php