🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!

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

Reading time 3 min
Published Aug 8, 2017
Updated Oct 15, 2019

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:

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

DataCamp
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
Udacity
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
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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:

Example
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:

Example
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().