JavaScript Popup Boxes: How they Works with Examples

JavaScript uses popup boxes to show quick messages or ask for direct input. These boxes stop the flow of the page until you take an action.

Understand the JavaScript Popup Boxes

JavaScript has three types of pop-up boxes. Each box has its own way to direct user interaction.

• The alert box shows a message and waits for you to press OK.
• The confirm box asks a question and gives OK or Cancel as choices.
• The prompt box asks for text input and returns what you type.

Alert Box in JavaScript

An alert box shows a single message on the screen. It forces the user to read it before returning to the page.

Here is the syntax:

alert("message");

Confirm Box in JavaScript

A confirmation box gives you two choices. You press OK or Cancel, and the code acts based on the choice.

The syntax looks like this:

confirm("message");

Prompt Box in JavaScript

A prompt box asks you to type a value. It returns what you type, so the script can use it.

Let’s see an example for each one in the following section.

Examples

Alert Box with Simple Message:

alert("Welcome to the site!");

This example shows a small message that says “Welcome to the site!” The box stops other actions until you press OK to close it.

Confirm Box with Conditional Response:

let answer = confirm("Do you want to log out?");
if (answer) {
  alert("You logged out.");
} else {
  alert("You stayed logged in.");
}

This code asks a yes or no type of question. If you press OK, the code shows a logout message. If you press Cancel, it shows that you stayed in.

Prompt Box with User Input:

let name = prompt("Enter your name:");
alert("Hello " + name + "!");

This code asks for a name and then shows it inside an alert. It shows how the prompt can pass values into later messages.

Prompt with Number and Calculation:

let num = prompt("Enter a number:");
let square = num * num;
alert("Square of the number is " + square);

This example asks for a number and then multiplies it by itself. The final alert shows the square of the value you entered.

Wrapping Up

You learned how JavaScript uses alert, confirm, and prompt boxes. And you also saw how each type works with real code examples.

Here is a quick recap:

• The alert box shows one message.
• The confirm box asks for a choice.
• The prompt box asks for input.

FAQs

<script>
alert("Welcome to Popup Boxes");
</script>

<script>
alert("Hello User");
var choice = confirm("Do you agree?");
var name = prompt("Enter your name:");
</script>

<script>
alert("Simple message");
var result = confirm("Continue?");
var input = prompt("Type something:");
</script>

<script>
alert("Quick test popup");
</script>

Similar Reads