Online Browser Popup Window Generator
Create custom browser popup windows instantly with this online tool. Simply enter the target URL, window name, size (width and height), and choose how the popup should open via link, button, image, or automatically when the page loads. You can also enable screen centered popups and preview the result in real time. Once ready, copy the automatically generated HTML and JavaScript code and use it directly in your project.
Contents
The window.open() function is a built in JavaScript method used to open a new browser window or tab. It allows developers to specify the page URL, popup name, and a collection of window features such as width, height, position, scrollbars, and more. This makes it useful for creating customized popup dialogs, login boxes, external link windows, or notification popups.
window.open() Parameters
The basic syntax is:
window.open(URL, windowName, windowFeatures);Below are the three parameters:
1. URL
The webpage address to open in the new window. If left blank or set to an empty string, it opens a new blank window.
2. windowName
A unique name for the popup window. It is used for targeting if a popup with the same name already exists, the browser will reuse it instead of creating a new one.
3. windowFeatures
A comma separated list of window options including size and appearance. Common features are:
width– Width of the popup window in pixelsheight– Height of the popup window in pixelsleft/top– Screen position of the popupresizable– Whether the user can resize the windowscrollbars– Scrollbars visibility when content exceeds the viewport
Not all features are fully supported in modern browsers, as many UI elements cannot be disabled for security and usability reasons.
Example of window.open()
This function opens a new popup window sized 600×400 pixels, placed 100 pixels from the top left of the screen, and allows resizing and scrollbars.
Add Popup Window URL And Size Name
Live Preview:
Code HTML And JavaScript:
(() => {
let popupWindow = null;
let previousURL = null;
const openPopup = (event) => {
event.preventDefault();
let url = event.currentTarget.href;
let windowClosed = !popupWindow || popupWindow.closed;
// Open window if popup is not open or closed
if (windowClosed || previousURL !== url) {
popupWindow = window.open(url, 'myPopup', 'width=800,height=500,left=0,top=10');
previousURL = url;
}else{
// Focus the window if it exists
popupWindow.focus();
}
};
const links = document.querySelectorAll(".popupLink");
links.forEach(link => {
link.addEventListener("click", openPopup, false);
});
})();Here is a clean simple page onload popup example. The popup window will open automatically when the page loads.
<h2>Page Onload Popup Example</h2>
<p>The popup window will open automatically when the page loads.</p>
<script>
document.addEventListener('DOMContentLoaded', function() {
const popup = window.open(
'https://www.example.com',
'myPopup',
'width=600,height=400,resizable=yes,scrollbars=yes'
);
// Handle popup blocker
if (!popup || popup.closed || typeof popup.closed === 'undefined') {
console.warn('Popup was blocked. Please allow popups for this site.');
alert('Please enable popups to view this content.');
} else {
popup.focus();
}
});
</script>Inline popup code allows you to open a new window directly from a link, button, or image without a separate JavaScript function. It is a quick and simple way to launch a popup using just a single HTML line.
<!-- Link Click Popup -->
<a href="javascript:window.open('https://google.com','popup','width=500,height=500');">
Open Popup Link
</a>
<!-- Button Click Popup -->
<button onclick="window.open('https://google.com','popup','width=500,height=500');">
Open Popup Button
</button>
<!-- Image Click Popup -->
<img src="image.jpg"
style="cursor:pointer;"
onclick="window.open('https://google.com','popup','width=500,height=5500');">This script manages popup windows efficiently by reusing a single popup window instead of creating multiple tabs. When you click links with target="popupWindow", they will open in the same popup window. If you click the same link again, it simply brings the existing window to focus without reloading. Different links will load new content in the same popup.
<a href="https://www.google.com/" target="popupWindow">Google</a>
<a href="https://www.youtube.com/" target="popupWindow">Youtube</a>
<a href="https://www.html-code-generator.com/" target="popupWindow">HTML</a>(() => {
let popupWindow = null;
let previousURL = "";
const windowSize = "width=800,height=600,left=0,top=0";
const windowName = "singleWindow";
const openPopupSingleTab = (url) => {
// If popup is not open or was closed
if (!popupWindow || popupWindow.closed) {
popupWindow = window.open(url, windowName, windowSize);
}
// If popup is open but URL is different
else if (previousURL !== url) {
popupWindow.location.href = url;
popupWindow.focus();
}
// If popup already contains same URL
else {
popupWindow.focus();
}
previousURL = url;
};
const handlePopupClick = (event) => {
event.preventDefault();
const url = event.currentTarget.href;
if (url) {
openPopupSingleTab(url);
}
};
// Attach listeners to links with target="popupWindow"
const links = document.querySelectorAll("a[target='popupWindow']");
links.forEach(link => {
link.addEventListener("click", handlePopupClick, false);
});
})();You can control where a popup window appears on the screen by adjusting the left and top values inside window.open(). By changing these values, you can open the popup aligned to the left, centered, or aligned to the right of the user screen. Below are simple examples for each position.
Left Aligned Popup:
// left
window.open(
"https://example.com",
"leftPopup",
"width=500,height=500,left=0,top=10"
);Center Aligned Popup:
// center
const popupWidth = 500;
const popupHeight = 500;
const popLeft = Math.round((screen.width - popupWidth) / 2);
const popTop = Math.round((screen.height - popupHeight) / 2);
window.open(
"https://example.com",
"centerPopup",
`width=${popupWidth},height=${popupHeight},left=${popLeft},top=${popTop}`
);Right Aligned Popup: