// Basic alert
alert("Hello World!");

// Multi-line alert
alert("Line 1\nLine 2\nLine 3");

// Alert with variables
const userName = "John";
alert(`Welcome, ${userName}!`);

2. Confirm Box

// Basic confirm
const result = confirm("Are you sure?");
if (result) {
    console.log("User clicked OK");
} else {
    console.log("User clicked Cancel");
}

// Practical example
function deleteItem() {
    if (confirm("Delete this item permanently?")) {
        // Delete logic here
        alert("Item deleted!");
    }
}

3. Prompt Box

// Basic prompt
const name = prompt("Enter your name:", "Guest");

// Handle cancellation
if (name !== null) {
    alert(`Hello, ${name}!`);
} else {
    alert("No name entered.");
}

// With validation
let age;
do {
    age = prompt("Enter your age (must be 18+):", "18");
} while (age && (isNaN(age) || parseInt(age) < 18));

4. Line Breaks

// Method 1: Using \n
alert("Line 1\nLine 2\nLine 3");

// Method 2: Template literals
alert(`Line 1
Line 2
Line 3`);

// Method 3: Array join
alert(["Line 1", "Line 2", "Line 3"].join("\n"));

// Method 4: String concatenation
alert("Line 1" + "\n" + "Line 2" + "\n" + "Line 3");

Real-World Examples

Form Validation

function validateForm() {
    const email = prompt("Enter your email:");

    if (!email) {
        alert("❌ Email is required!");
        return false;
    }

    if (!email.includes("@")) {
        alert("⚠️ Please enter a valid email address!");
        return false;
    }

    alert("✅ Email validated successfully!");
    return true;
}

User Registration Flow

function registerUser() {
    alert("Welcome to Registration!\n\nPlease provide the following information:");

    const username = prompt("Choose a username:");
    if (!username) {
        alert("Registration cancelled.");
        return;
    }

    const email = prompt("Enter your email:");
    if (!email) {
        alert("Registration cancelled.");
        return;
    }

    const password = prompt("Create a password:", "");
    if (!password) {
        alert("Registration cancelled.");
        return;
    }

    alert(`✅ Registration Complete!\n\nUsername: ${username}\nEmail: ${email}\n\nAccount created successfully!`);
}

Error Handling

function handleError(error) {
    const errorMessage = `
🚨 ERROR ALERT
===============
Error: ${error.message}
Code: ${error.code}
Time: ${new Date().toLocaleString()}

🔧 Recommended Actions:
1. Refresh the page
2. Clear cache
3. Contact support
===============
    `;

    alert(errorMessage);
}

Best Practices

Custom Modal Alternative

// Better than native popups
function showCustomModal(message) {
    const modal = document.createElement('div');
    modal.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    `;

    modal.innerHTML = `
        <div style="background: white; padding: 30px; border-radius: 10px; max-width: 400px;">
            <h3>Notification</h3>
            <p>${message}</p>
            <button onclick="this.parentElement.parentElement.remove()">OK</button>
        </div>
    `;

    document.body.appendChild(modal);
}

This comprehensive guide provides everything you need to know about JavaScript popup boxes with practical, interactive examples!

JavaScript Popup Boxes - Complete Guide with Examples

Complete Popup Boxes Reference

1. Alert Box