Creating Javascript Popup Windows: Javascript Alert Boxes and More

Anyone who has ever browsed the web is familiar with the dreaded Javascript popup window. Javascript alert boxes annoy us so much that we often block them from our browsers with popup blockers, and it can sometimes feel like a shock that the Javascript standard allows them at all.

Javascript popup windows and alert boxes do have a purpose. The flurries of irritating boxes we so often see on the web happen because programmers don’t always create them properly, turning them into intrusive nuisances rather than the helpful notifications they’re supposed to be.

This article shows how to create, use, and manage Javascript popup windows effectively.

Creating and Using Javascript Popup Windows

Javascript popup windows are not part of the Document Object Model (DOM); they are automatically created in the browser and are not editable using CSS or other Javascript. It is possible to create customized popup windows using HTML and CSS. However, in this tutorial we’ll cover popups that are built into Javascript by default.

Javascript Alert Boxes

Javascript alert boxes display a message to the user. The user only has one option when presented with this box: to click the “OK” button.

The alert box doesn’t need to hold an error or warning message. It may contain any type of simple message the user needs to see, regardless of context. Blank strings or strings that hold only whitespace are allowed, but they would be uninformative to the user.

There are two different methods to specify a Javascript alert box: by using window.alert() or alert(). These methods do the same thing; which one you use depends on your local style guide or your personal preferences.

window.alert("This is an alert.");
alert("This is an alert too!");

These boxes are commonly found in the catch blocks of try catch statements to let a user know that a problem happened in a program.

Javascript Confirm Boxes

Javascript confirm boxes display a choice of two options to the user. The user may click the “OK” button to accept the choice or “Cancel” to reject it.

If the user clicks the “OK” button, the box returns true. If the user clicks the “Cancel” button, the box returns false. If else statements are essential for handling this box’s options properly.

let val = "";
if (confirm("Click OK if you love Javascript!")) {
    val = "Yay!";
} else {
    val = "Bummer...";
}

You can simplify this pattern by initializing your response with a default value.

let val = "Bummer..."; // default, unless user clicks ‘OK’ button
if (confirm("Click OK if you love Javascript!")) {
    val = "Yay!";
}

Javascript Prompt Boxes

Javascript prompt boxes display an input field where the user may enter a value. After entering the value, the user may click “OK” to return the value or “Cancel” to return null.

If the user enters nothing into the input field, a Javascript prompt box will return an empty string (remember that this is not the same as a null value). Likewise, if the user enters only whitespace into the input field, the box will return that whitespace. If you don’t want to consider empty strings or whitespace as valid input, make sure to check the input accordingly.

let status = prompt("What programming language do you like?");
status = status.trim();  // trim leading and trailing whitespace

if (status == null || status == "") {
    status = "Not talking.";
} else {
    status = "Glad you like " + status + "!";
}

Javascript prompt boxes can also have a second parameter that creates a default value for the input field. However, you should still assume that empty inputs are possible, even if you specify a default value.

let status = prompt("What programming language do you like?", "Javascript");
status = status.trim();  // trim leading and trailing whitespace

if (status == null || status == "") {
    status = "Not talking.";
} else if (status === "Javascript") {
    status = "Hooray! Javascript is the best!";
} else {
    status = "Glad you like " + status + "!";
}

Managing Javascript Popup Windows

Since all Javascript popup windows require interaction with the user, it is easy to make the logical leap that any interaction with the user should be through some type of Javascript popup window. This is where developers get in trouble; Javascript popup windows are useful tools, but they’re not appropriate for every situation.

Javascript popup windows disrupt the flow of a web page by design, but it’s important not to let that feature disrupt a user’s experience on the page. Before creating a Javascript popup window, a good rule is to ask yourself whether there is a less intrusive way to convey the same information. Try to use popup windows only when it is vital for the user to shift their attention away from normal browsing.

Remember that built-in Javascript popup windows are also rarely accessible for web users with disabilities. Be aware of the impact these boxes may have on users with disabilities and plan your web pages accordingly — have accessible dialogs created with HTML and CSS wherever possible. Assistive technologies can read these dialogs reliably because they are part of the DOM.

Conclusion

Using the right box in the right context can make a big difference in a user’s web experience, while the wrong box (or too many in rapid succession) can ruin a user’s experience. Never use Javascript popup windows when simple text on the web page itself will suffice.

Javascript popup windows, and especially Javascript alert boxes, don’t have to be a nuisance on the web. With the appropriate programming techniques, developers can reclaim these elements to help, rather than harass, web users.

Enroll in our Intro to Programming Nanodegree Program today to learn more about Javascript alert boxes and other programming concepts.

Start Learning