Native JavaScript popup boxes all you need to know

Javascript has got three different inbuilt popup boxes to notify, confirm and take user input data. These popup boxes are very handy for prototyping, teaching, and accepting or printing out the data instantly without the need to create popups from scratch. 

JavaScript popup message boxes

The different Javascript popup boxes or methods are:

1. Alert
2. Confirm
3. Prompt

How to use the alert box in JS?

alert is a global method in Javascript which means we can use it in any part of our code. Often it is used with the window object window.alert but calling alert method directly without prefixing window means the same, as every window property and method can be accessed directly without the prefix.

alert('Welcome to the DevApt');

The alert method:

• takes an optional input as a message to display to the user. 
• prevents users from accessing other parts of the browser window until the alert box is closed
• can run any valid Javascript code passed as an argument, which means you should never pass user entered data directly
• returns nothing or undefined

Few examples of alert popup:

alert(); // Shows empty dialog box
alert("Hi,\nYou clicked I'm feeling lucky button"); // Show the message in two lines
alert(2+2); // Calculates and shows 4
alert(localStorage.getItem('token')); // Show the value of 'token' if stored in local storage else null

const result = alert('Your form submitted');
console.log(result); // undefined

How to use the confirm box in Javascript?

Just like alert, confirm is also a global method that can be accessed in any part of the Javascript code. The main difference is that on popping out the alert it returns a boolean value, eithor true or false based on the user action. 

confirm('Do you want to leave the page without saving?');

The confirm method:

• takes an optional input as a message to display it to the user for the confirmation
• prevents users from accessing other parts of the browser window until the confirm box is closed
• can run any valid Javascript code passed as an argument, which means you should never pass user entered data directly
• returns true when user clicks OK and false when user clicks Cancel button on the confirm box

Few examples of confirm popup:

const result = confirm('Do you like to cancel the request?');
if(result) console.log('You request is cancelled');
else console.log('Your request is processing'); 

if(confirm("Is 2 + 2 = 4")) location.href = '/dashboard'; // If confirmed redirected to the /dashboard page

How to use the prompt box in JS?

prompt is a global method similar to the alert and confirm popup methods. By using alert and confirm popup methods we cannot let the user enter/send the data, and to fulfil that case we have this prompt method. Whenever user enters any data in the popup box, the same gets returned on clicking the OK button else null.

prompt('Enter your name');

The prompt method:

• takes an optional input as a message to display the same to the user
• prevents users from accessing other parts of the browser window until the prompt box is closed
• can run any valid Javascript code passed as an argument, which means you should never pass user entered data directly
• returns user entered data as a string when user clicks OK and null when user clicks Cancel button on the prompt box

Few examples of prompt popup:

const result = prompt("Enter something");
if(Boolean(result)) console.log(`You entered ${result}`); // Logs the input if user enters any data

const result = prompt('What is 2 + 2?');
if(Number(result) === 4) alert("You are right!");  // Shows an alert if it's 4
else alert('You are wrong!');  // Shows an alert for input or action other than 4

There are few points to note before you use these popup methods in your code. These methods should not be used when you want to have a very good user experience.

The alert method has a history of being used in XSS(Cross Site Scripting) attacks, so you should never use alert method with user entered data directly. 

The most general use of alert and confirm boxes is, when users are about to leave your site or when something is not saved or incomplete, showing these popups feels normal. Sites like Facebook uses this type of popup alert when you try to go back or leave the site in between uploading or publishing the post.