Dialog boxes

Alert box

The alert box alerts the user to an event. There is no interactivity as the user can only view this dialog box and click “ok”.

window.alert("my message");

The above example makes an alert box with the text “my message”.

Confirmation box

The confirm box adds a level of interactivity as the user can click either “ok” or “cancel”. If the user clicks “ok” then the value returned is true and if the user clicks “cancel” the value returned is false.

window.confirm("my message");

This code makes the confirm box with the text “my message”. To capture this event you can load it into a variable.

var box = window.confirm("message");
if(box)
{
	alert("User clicked OK");
}else{
	alert("User clicked CANCEL");
}

This code makes a confirm box, and the output of the alert box will depend on what the user clicks in the confirm box.

Prompt box

The prompt box adds a different level of interactivity as it allows the user to enter text.

window.prompt("message", "default text");

This function has two parameters, one for the text in the box, and one for the default text in the text box. This can be used to capture data entered by the user.

var message = window.prompt("my message", "default text");
alert("You typed: " + message);

The above code prompts the user for an input and then displays the input in an alert box.

Multiple line messages

Sometimes you might want to have a message on multiple lines. This can be done using the “\n” code.

window.alert("Line 1 \n Line 2 \n Line 3 \n Line 4");

Categories

Tags

No tags

Social