Popups and Window Methods in JavaScript

JavaScript provides several methods to create popups and interact with browser windows. These are mainly used for displaying alerts, user confirmations, and opening new browser windows.

🔹 1. Alert, Confirm, and Prompt

JavaScript has three built-in popup boxes:

✅ `alert()` - Simple Message Popup

Displays a message to the user.

alert("Hello! Welcome to our website.");

✔ Used for notifications or warnings.

✅ `confirm()` - Yes/No Popup

Displays a message with OK and Cancel buttons.

let response = confirm("Do you want to continue?");
if (response) {
    console.log("User clicked OK");
} else {
    console.log("User clicked Cancel");
}

✔ Used to ask for confirmation before performing an action.

✅ `prompt()` - User Input Popup

Asks the user for input.

let name = prompt("Enter your name:", "John Doe");
console.log("User name is:", name);

✔ If the user cancels, prompt() returns null.

🔹 2. Opening a New Window (`window.open()`)

You can open a new browser window using window.open().

let newWin = window.open("https://www.google.com", "_blank", "width=500,height=500");

✔ Parameters:

"https://www.google.com" → URL to open
"_blank" → Opens in a new tab (Use "_self" to open in the same tab)
"width=500,height=500" → Set window size

🔹 3. Closing a Window (`window.close()`)

You can close a window using window.close(), but only if it was opened with window.open().

newWin.close(); // Closes the new window

⚠ Note: Browsers may block window.close() unless triggered by user action (like a button click).

🔹 4. Moving and Resizing a Window

You can control the position and size of a window (only for popups, not the main window).

✅ `window.resizeTo(width, height)`

Resizes the popup window.

newWin.resizeTo(800, 600);

✅ `window.moveTo(x, y)`

Moves the popup to a specific screen position.

newWin.moveTo(100, 100);

✔ Useful for positioning popups dynamically.

🔹 5. Window Properties (`window.innerWidth`, `window.innerHeight`)

You can get the current window size using:

console.log("Width:", window.innerWidth);
console.log("Height:", window.innerHeight);

🔹 6. Prevent Popups from Being Blocked

Modern browsers block popups unless triggered by a user action.

✅ Solution: Open popups inside a button click event.

document.getElementById("openPopup").addEventListener("click", function() {
    window.open("https://example.com", "_blank", "width=600,height=400");
});

✔ Avoid opening popups automatically when the page loads.

🔹 7. Example: Open, Resize, and Close a Window

<button onclick="openPopup()">Open Popup</button>
<button onclick="resizePopup()">Resize Popup</button>
<button onclick="closePopup()">Close Popup</button>

<script>
    let myWindow;

    function openPopup() {
        myWindow = window.open("https://example.com", "_blank", "width=400,height=300");
    }

    function resizePopup() {
        if (myWindow) myWindow.resizeTo(600, 500);
    }

    function closePopup() {
        if (myWindow) myWindow.close();
    }
</script>

✔ This lets the user open, resize, and close a popup window dynamically.

🔹 Summary

✔ alert(), confirm(), and prompt() display popups.
✔ window.open() creates a new browser window.
✔ window.close() closes a window (if user-initiated).
✔ resizeTo() and moveTo() adjust the window's size and position.
✔ Browsers block auto popups, so trigger them inside user actions.

🚀 Use popups wisely to improve user interaction!

Souy Soeng

Popups and Window Methods in JavaScript