JavaScript built-in dialog windows or boxes: alert(), confirm() and prompt()

JavaScript provides three (3) built-in dialog windows for basic interaction with the user. These are modal windows which means that they open on top of the parent window and the user cannot interact with the parent window until the dialog window is closed. These windows are all methods of the window object.

Go to JavaScript: Basics

Also see JavaScript: Forms for further examples and use.

1. The alert() dialog box

Can be used to show a message to the user. This message can be feedback for the user when entering information into a form. The window displays the OK button and must be acknowledge before the user can proceed. See JavaScript: Forms code snippets 6 and 7 for examples of use with forms.

<!-- The alert() dialog box -->

<!-- Place in the body of the page. -->

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

/* alert() is a method of the window object, 
as the 'window' object is the top level object within the 
browser window it is not strictly required.
I use it here for consistency */

window.alert("Thank you.")

</script>

2. The confirm() dialog box

Offers the user the choice of the OK or Cancel buttons. The OK button returns 'true' and the Cancel button returns 'false'. The returned values can then be captured by an 'if else' conditional. See JavaScript: Basics plus code snippets for further examples of conditional statements.

<!-- The confirm() dialog box -->

<!-- Place in the body of the page. -->

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

/* confirm() is a method of the window object, 
as the 'window' object is the top level object within the 
browser window it is not strictly required.
I use it here for consistency */

// declare variable with a 'var statement'
var answer
// assign variable to the confirm box
answer = window.confirm("Would you like to proceed?")
	if (answer)
	// this line executes if the OK button is clicked and the 'if' condition is true
	{
	window.alert("Thank you.")
	}
	else
	// this line executes if the Cancel button is clicked and the 'if' condition is false
	{
	window.alert("Goodbye.")
	}
</script>

3. The prompt() dialog box

Can be used to collect information from the user but in practice the prompt() dialog box is seldom used in websites today.

This window displays a message, an input field and two buttons: OK and Cancel. The value entered into the input field is returned when the user clicks the OK button. The prompt() method dialog box is rather limited and the use of forms may be more appropriate to collect information from the user. See JavaScript: Forms for examples and use of forms.

<!-- The prompt() dialog box -->

<!-- Place in the body of the page. -->

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

/* prompt() is a method of the window object, 
as the 'window' object is the top level object within the 
browser window it is not strictly required.
I use it here for consistency */

// declare variable with a 'var statement'
var answer
// assign variable to the prompt box
answer = window.prompt("How many items do you require?",'')
// note use of + for string concatenation
window.alert("Thank you for your order of "+answer+" items.")

</script>

Please note:

Default security settings in Microsoft Internet Explorer® may prevent the snippets incorporating the 'window.prompt' user input window from running.

All snippets should run OK if you are using a Firefox®, Opera®, Netscape®, Google Chrome®, browser.

Copyright © 2006-2010 justfigures.co.uk