JAVASCRIPT PoPUp Boxes

Posted on 19/09/2009 by

6



You’ve probably encountered JavaScript popup boxes many times while visiting websites. Now, I don’t mean ” popup windows” we’ll cover that later. What I mean is a popup box that displays a message, along with an “OK” button. Depending on the popup box, it might also have a “Cancel” button, and you might also be prompted to enter some text. These are still built into JavaScript and are what I call “JavaScript PoPUp Boxes”. They can also be reffered to as “dialog boxes”, “JavaScript dialogs”, “popup dialog” etc…

JavaScript has 3 kinds of PoPUp Boxes: The Alert Box, Confirm Box and The Prompt Box.

Example 1:The Alert Box

An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click “OK” to proceed.

<html>
<head>
<script type=”text/javascript”>
function show_alert()
{
alert(“I am an alert box!”);
}
</script>
</head>
<body>

<input type=”button” onclick=”show_alert()” value=”ok” />
<input type=”button” onclick=”show_alert()” value=”cancel” />
</body>
</html>

Alert Box

Example 2:The Confirm Box

A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click wither “OK” or “Cancel” to proceed…If the user clicks “OK” the box returns true. If the user clicks “Cancel”, the box returns false.

<html>
<head>
<script type=”text/javascript”>
function show_confirm()
{
var r=confirm(“Press a button”);
if (r==true)
{
document.write(“You pressed OK!”);
}
else
{
document.write(“You pressed Cancel!”);
}
}
</script>
</head>
<body>

<input type=”button” onclick=”show_confirm()” value=”Confirm” />
<input type=”button” onclick=”show_confirm()” value=”Yes” />
<input type=”button” onclick=”show_confirm()” value=”No” />
</body>
</html>

Confirm PoP UP BOX

Example3: The Prompt Box

A Prompt box is used if you want the user to input a value before entering a page. When a prompt box pops up, the user will click either “OK” or “Cancel” to proceed after entering an input value. If the user clicks “OK” the box returns the input value. If the user clicks “Cancel” the box returns null.

<html>
<head>
<script type=”text/javascript”>
function show_prompt()
{
var name=prompt(“Please enter your name”,”EllaHax”);
if (name!=null && name!=””)
{
document.write(“Hello ” + name + “! How are you today?”);
}
}
</script>
</head>
<body>

<input type=”button” onclick=”show_prompt()” value=”Show a prompt box” />
</body>
</html>

EllaHax

Tagged: , , , , , ,
Posted in: Coding, JavaScript