JavaScript Popup Boxes

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 all built into JavaScript and are what I call "JavaScript popup boxes". They can also referred to as "dialog boxes", "JavaScript dialogs", "popup dialog" etc.

Types of Popups

JavaScript has three different types of popup box available for you to use. Here they are:

Alert

Displays a message to the user. Example:

Confirm

Asks the user to confirm something. Often, this is in conjunction with another (potentially significant) action that the user is attempting to perform. Example:

Prompt

Prompts the user for information. Example:

Popup Code

Here's the syntax for specifying popup boxes, along with some examples.

Type of Popup	Syntax	Example Code
Alert	`alert("Message");`	`alert("Hey, remember to tell your friends about Quackit.com!");`
Confirm	`confirm("Message");`	`confirm("Are you sure you want to delete the Internet?");`
Prompt	`prompt("Message","Default response");`	`prompt('Please enter your favorite website', 'Quackit.com');`

Note that the user's browser determines what the popup box actually looks like. This is because our popup code is simply telling the browser to "display this type of popup with this message". It is up to the browser to render the correct type of popup with the specified message.

Integating JavaScript with HTML

You will have noticed that the (above) example popups didn't appear as soon as you loaded this page. They only appeared after you clicked the relevant button. This is because I placed code into each HTML button, so that when it was clicked, it triggered off our JavaScript.

This is a very common way of using JavaScript on the web. By "attaching" JavaScript to our HTML elements, we can make our pages much more responsive to our users' actions.

The following lesson explains this in more detail.

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/javascript/tutorial/javascript_popup_boxes.cfm">JavaScript Popup Boxes</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites