Main Tips on Creating JavaScript Alerts and Other Types of Popup Boxes

JavaScript alerts provide users with relevant information or with data that needs to be confirmed. The addition of JavaScript alerts makes websites more dynamic and informative.

This tutorial covers the three kinds of popups JavaScript has to offer: alert, confirm, and prompt. You will learn the usage of these different popups and the ways they improve websites.

JavaScript Alert: Main Tips

• There are three types of JavaScript popup windows: Alert, Confirm and Prompt.
• To write multiple lines in a JavaScript popup window, you will need to use "\n" string.
• You do not need to use the window prefix when writing pop-up box methods.

Alert Box

A JavaScript alert box is used when you need some information to reach the user. When the alert box shows up, the user will need to press the OK button to resume activity. It interrupts the user's activity, so you need to be careful when using it.

You can write the following code to display a JavaScript alert box:

window.alert("Alert Text!");

The window prefix is not mandatory. You can write the code without it:

alert("Alert Text!");

The example below creates a pop-up alert that contains two lines of text:

alert("Hello\nHow are you?");

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Confirm Box

A confirm pop-up box is used when you need the user to accept something. When the confirm pop-up box opens, the user has to click one of the two buttons (OK or CANCEL) to close the box. OK returns true, while CANCEL returns false.

You can write the following code to display a confirm box:

window.confirm("Confirmation Information");

The window prefix is not mandatory here as well. You can write the code without it:

confirm("Confirmation Information");

The confirm box returns true if OK button is clicked, and returns false if CANCEL is pressed:

var r = confirm("Confirm something!");
if (r == true) { 
   x = "OK was pressed";  
}  
else {
   x = "Cancel was pressed";  
}

Prompt Box

The prompt box is used when you need the user to insert some information before proceeding. To turn the prompt box off, the user has to click OK or CANCEL buttons.

The confirm box returns the input data if the OK button is clicked. It returns null if CANCEL button is clicked.

You can write the following code to display a prompt box:

window.prompt("Information Text","Default Text");

Just as before, the window prefix is not mandatory. You can write the code without it:

prompt("Information Text","Default Text");

See the example below to get a clearer idea, and click Try it Live! to see how it works:

function firstFunction() {
    var txt;
    var person = prompt("Please enter your full name:", "Harry Potter");
    if (person  == null || person  == "") {
        txt = "User cancelled the prompt.";
    } else {
        txt = "Hello " + person + "! How are you today?"
    }
    document.getElementById("test").innerHTML = txt;
}

JavaScript Popup Boxes: Summary

• If you want to display an alert of some kind to a user, use alert().
• If you want to display a confirmation box with option buttons, use confirm().
• If you want to use a pop up with an input and option buttons, which can display inputed values, use prompt().