<p>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.&nbsp;</p>
<h2 style="text-align: center;">JavaScript popup message boxes</h2>
<h4>The different Javascript popup boxes or methods are:</h4>
<ol>
<li>Alert</li>
<li>Confirm</li>
<li>Prompt</li>
</ol>
<h3 style="text-align: center;">How to use the alert box in JS?</h3>
<p><code>alert</code> 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 <code>window.alert</code> but calling <code>alert</code> method directly without prefixing <code>window</code> means the same, as every window property and method can be accessed directly without the prefix.</p>
<pre class="language-javascript"><code>alert('Welcome to the DevApt');</code></pre>
<p>The <code>alert</code> method:</p>
<ul style="list-style-type: square;">
<li>takes an optional input as a message to display to the user.&nbsp;</li>
<li>prevents users from accessing other parts of the browser window until the alert box is closed</li>
<li>can run any valid Javascript code passed as an argument, which means you should never pass user entered data directly</li>
<li><strong>returns nothing or <code>undefined</code></strong></li>
</ul>
<p>Few examples of <code>alert</code> popup:</p>
<pre class="language-javascript"><code>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</code></pre>
<h3 style="text-align: center;">How to use the confirm box in Javascript?</h3>
<p>Just like <code>alert</code>, <code>confirm</code> 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.&nbsp;</p>
<pre class="language-javascript"><code>confirm('Do you want to leave the page without saving?');</code></pre>
<p>The <code>confirm</code> method:</p>
<ul style="list-style-type: square;">
<li>takes an optional input as a message to display it to the user for the confirmation</li>
<li>prevents users from accessing other parts of the browser window until the confirm box is closed</li>
<li>can run any valid Javascript code passed as an argument, which means you should never pass user entered data directly</li>
<li><strong>returns <code>true</code> when user clicks <code>OK</code> and <code>false</code> when user clicks <code>Cancel</code> button on the confirm box</strong></li>
</ul>
<p>Few examples of <code>confirm</code> popup:</p>
<pre class="language-javascript"><code>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</code></pre>
<h3 style="text-align: center;">How to use the prompt box in JS?</h3>
<p><code>prompt</code> is a global method similar to the <code>alert </code>and <code>confirm</code> popup methods. By using <code>alert</code> and <code>confirm</code> popup methods we cannot let the user enter/send the data, and to fulfil that case we have this <code>prompt</code> method. Whenever user enters any data in the popup box, the same gets returned on clicking the <code>OK</code> button else <code>null</code>.</p>
<pre class="language-javascript"><code>prompt('Enter your name');</code></pre>
<p>The <code>prompt</code> method:</p>
<ul style="list-style-type: square;">
<li>takes an optional input as a message to display the same to the user</li>
<li>prevents users from accessing other parts of the browser window until the prompt box is closed</li>
<li>can run any valid Javascript code passed as an argument, which means you should never pass user entered data directly</li>
<li><strong>returns user entered data as a string when user clicks <code>OK</code> and <code>null</code> when user clicks <code>Cancel</code> button on the prompt box</strong></li>
</ul>
<p>Few examples of <code>prompt</code> popup:</p>
<pre class="language-javascript"><code>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</code></pre>
<p>There are few points to note before you use these popup methods in your code. These methods <em>should not be</em> used when you want to have a very good user experience.</p>
<p>The <code>alert</code> method has a history of being used in XSS(Cross Site Scripting) attacks, so you should never use <code>alert</code> method with user entered data directly.&nbsp;</p>
<p>The most general use of <code>alert</code> and <code>confirm</code> 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.</p>

Here are the different JavaScript popup methods you should know and their use cases. Alert, Confirm, and Prompt can be used instantly to show messages.

Posts tagged with Popups

Native JavaScript popup boxes all you need to know