JavaScript — Popup Boxes

The three built-in dialogs

alert("Saved!");                        // message only
const ok = confirm("Delete this?");     // true/false
const name = prompt("Your name?", "Ada");  // string or null

All three are synchronous — the entire page freezes until the user responds:

console.log("before");
alert("…");
console.log("after");   // waits indefinitely

Return values

Dialog	Returns
alert	undefined
confirm	true (OK) / false (Cancel)
prompt	typed string / null (Cancel)

The classic delete-confirmation:

deleteBtn.addEventListener("click", () => {
    if (confirm("Delete this item?")) deleteItem();
});

prompt returns strings — always convert

User types "25"? You receive "25":

const age = Number(prompt("Age?"));

if (ageText === null) { /* cancelled */ }
else if (Number.isNaN(age)) alert("Invalid age");

Handle the cancel case (null) before using the value.

Limits you should design around

1. Blocking — nothing else on the page runs meanwhile
2. Unstyleable — browser chrome, not your design
3. Suppressible — browsers block repeated dialogs from spammy scripts
4. Unsafe for secrets — never prompt for passwords/tokens

The production alternative: custom modals

<dialog id="confirm">
    <p>Delete this item?</p>
    <button id="yes">Delete</button>
    <button id="no">Cancel</button>
</dialog>

const dialog = document.querySelector("#confirm");

deleteBtn.addEventListener("click", () => dialog.showModal());

dialog.querySelector("#yes").addEventListener("click", () => {
    dialog.close();
    deleteItem();
});

The native <dialog> element gives you styling, focus trapping, and an Esc handler free. Full control over design and accessibility.

When the built-ins are fine

• Learning and quick prototypes
• Debugging when DevTools is awkward
• Internal admin tools where polish doesn't matter

Anything user-facing deserves a modal.

Mini Practice

1. Chain all three dialogs once; log each return value + typeof.
2. Confirm-guarded delete with both branches handled.
3. Numeric prompt with null-check AND NaN validation.
4. Rebuild the confirm flow as a native <dialog>; compare UX.
5. List three reasons alert() is wrong in a customer-facing app.

JS track complete — every syllabus topic now has content.