Tutorials

Learn web design and programming with our free video and text tutorials.

Web Designer? Design and market your own professional website with easy-to-use tools.

Partners

Javascript Popup Boxes Tutorial

In javascript there are 3 kinds of popup boxes: alert box, confirm box and prompt box.

alert box - An alert box requires the user to click the button which appears when the alert box pops up to proceed.
confirm box - When a confirm box pops up, the user is required to click either "OK" or "Cancel" to proceed.
prompt box - When a prompt box pops up, the user has to click either "OK" or "Cancel" to proceed after entering an input value.

Alert box

An alert box requires the user to click the button which appears when the alert box pops up to proceed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>

<script type="text/javascript" language="javascript">

function alert_box()
{
alert("This is an alert box");
}

</script>

</head>
<body>

<form>
<input type="button" onclick="alert_box()" value="This is an alert box" />
</form>

</body>
</html>

The code above creates the button below, which when clicked on, prompts an alert box.

The text link below takes you to a web page with an example of an alert box.

Confirm box

When a confirm box pops up, the user is required to click either "OK" or "Cancel" to proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>

<script type="text/javascript" language="javascript">

function confirm_box()
{
var r=confirm("Press a button");
if (r==true)
{
document.write("You pressed OK");
}
else
{
document.write("You pressed Cancel");
}
}

</script>

</head>
<body>

<form>
<input type="button" onclick="confirm_box()" value="This is a confirm box" />
</form>

</body>
</html>

The code above creates the button below, which when clicked on, prompts a confirm box.

Clicking the button below will prompt a confirm box.

Prompt box

When a prompt box pops up, the user has to 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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>

<script type="text/javascript" language="javascript">

function prompt_box()
{
var name=prompt("Please enter your name");
if (name!=null && name!="")
{
document.write("Hello " + name);
}
}

</script>

</head>
<body>

<form>
<input type="button" onclick="prompt_box()" value="This is a prompt box" />
</form>

</body>
</html>

The code above creates the button below, which when clicked on, creates a prompt box. If the user clicks "OK the box returns the input value. If the user clicks "Cancel the box returns null.