JavaScript Popup Alert

Types of Popups

alert("Message");

confirm("Question?");

prompt("Enter text:");

// Custom modal

🔹 Alert Box

Display a simple message to the user:

// Basic alert
alert("Welcome to our website!");

// Alert with variable
let message = "Thank you for visiting!";
alert(message);

// Alert in function
function showWelcome() {
    alert("Hello! Welcome to JavaScript!");
}

showWelcome();

🔹 Confirm Box

Ask user to confirm an action (returns true/false):

// Basic confirm
let result = confirm("Do you want to continue?");
console.log(result); // true or false

// Using confirm in if statement
if (confirm("Delete this item?")) {
    console.log("Item deleted!");
} else {
    console.log("Action cancelled");
}

// Confirm before leaving page
function confirmExit() {
    return confirm("Are you sure you want to leave?");
}

🔹 Prompt Box

Get input from the user:

// Basic prompt
let name = prompt("What's your name?");
console.log("Hello " + name);

// Prompt with default value
let age = prompt("How old are you?", "25");
console.log("You are " + age + " years old");

// Validate prompt input
let email = prompt("Enter your email:");
if (email && email.includes("@")) {
    console.log("Valid email: " + email);
} else {
    console.log("Invalid email");
}

🔹 Practical Examples

Real-world usage of popup boxes:

// Login system
function login() {
    let username = prompt("Enter username:");
    let password = prompt("Enter password:");
    
    if (username === "admin" && password === "123") {
        alert("Login successful!");
        return true;
    } else {
        alert("Invalid credentials!");
        return false;
    }
}

// Calculator with prompts
function simpleCalculator() {
    let num1 = parseFloat(prompt("Enter first number:"));
    let num2 = parseFloat(prompt("Enter second number:"));
    let operation = prompt("Enter operation (+, -, *, /):");
    
    let result;
    switch(operation) {
        case "+": result = num1 + num2; break;
        case "-": result = num1 - num2; break;
        case "*": result = num1 * num2; break;
        case "/": result = num1 / num2; break;
        default: result = "Invalid operation";
    }
    
    alert("Result: " + result);
}