Java-Scripts.net

Centered Popup Window

Don't make users hunt for your popups. This script calculates the user's screen resolution and positions your popup window exactly in the center of their view.

Copy the Script

<script>
function popupCenter(url, title, w, h) {
    // Fixes dual-screen position                         Most browsers      Firefox
    var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : window.screenX;
    var dualScreenTop = window.screenTop != undefined ? window.screenTop : window.screenY;

    var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    var systemZoom = width / window.screen.availWidth;
    var left = (width - w) / 2 / systemZoom + dualScreenLeft;
    var top = (height - h) / 2 / systemZoom + dualScreenTop;
    
    var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w / systemZoom + ', height=' + h / systemZoom + ', top=' + top + ', left=' + left);
    
    // Focus the new window
    if (window.focus) newWindow.focus();
}
</script>

<button onclick="popupCenter('page.html', 'title', 500, 400)">Open Popup</button>

Frequently Asked Questions

Yes, it generally calculates the center based on the specific monitor where the browser window is currently located.

Yes. You pass the desired width and height to the function, and it handles the math to center it.