Popup Alerts

By the end of this lesson, you will be able to use JavaScript alert(), confirm(), and prompt() to show simple browser popup dialogs and handle their return values.

What it is

Popup alerts are built-in browser dialogs that JavaScript can open without creating HTML elements. alert() shows a message and returns undefined. confirm() shows a message with OK and Cancel buttons and returns true or false. prompt() shows a message with an optional text input and returns the entered string, or null if the user cancels.

These dialogs are blocking: the JavaScript thread waits until the user dismisses the dialog. Related terms include modal dialog, native browser dialog, and synchronous popup.

Why it matters

• They are useful for quick debugging or temporary warnings while learning JavaScript.
• They provide a simple yes/no decision flow using confirm().
• They can collect a small amount of text input using prompt().
• They help beginners understand return values and conditional logic.
• They require no HTML, CSS, or external libraries.

Syntax or steps

The smallest useful pattern is to call the dialog, store its result if needed, and branch based on that result.

alert("Saved!");

const ok = confirm("Continue?");
const value = prompt("Enter name:", "Guest");

Use alert() when you only need to show information. Use confirm() when you need a boolean answer. Use prompt() when you need a short text value.

Example

function saveDraft() {
  const name = prompt("Enter a file name:", "draft.txt");

  if (name === null) {
    alert("Save cancelled.");
    return;
  }

  const confirmed = confirm("Save as " + name + "?");

  if (confirmed) {
    alert("Saved!");
  } else {
    alert("Not saved.");
  }
}

saveDraft();

Part by part:

• prompt("Enter a file name:", "draft.txt") asks for text and shows draft.txt as the default value.
• If the user clicks Cancel, name becomes null, so the function stops early.
• confirm("Save as " + name + "?") asks for final approval and returns true or false.
• alert("Saved!") shows the reference-style success message.

Common mistakes

• Assuming prompt() returns a number. It returns a string. Convert it with Number(value) if needed.
• Forgetting that Cancel returns null. Always check for null before using the value.
• Using alerts for normal user experience. They block the page and cannot be styled well. Prefer custom modals or inline messages in real apps.
• Calling dialogs inside loops. This can create many blocking popups and freeze the interface.

When to use it

Native popup dialogs are best for quick prototypes, teaching, or rare warnings. For polished interfaces, use custom HTML modals, toasts, or form validation.

Practice

Guided exercise: Write a function that asks for a user’s age with prompt(), then uses alert() to say whether they are an adult if the age is 18 or more.

function checkAge() {
  const age = prompt("Enter your age:");
  const number = Number(age);

  if (number >= 18) {
    alert("Adult");
  } else {
    alert("Minor");
  }
}

Challenge: Modify the function so it uses confirm() to ask, “Are you sure?” before showing the result. Hint: stop the function if the user clicks Cancel.

Quick check

What does confirm("Delete?") return if the user clicks OK?

Answer: It returns true. If the user clicks Cancel, it returns false.

Summary

JavaScript popup alerts are simple native dialogs for messages, confirmations, and short text input. They are useful for learning and quick prototypes, but production interfaces usually need custom modals or inline feedback.