How to center a popup window?

Question

Center a popup window on screen? these don't work in Chrome w/ multimonitor. The "screen" seems to refer to the entire desktop, not just the current window. I want to center the popup window within the browser. How can I do that? Needs to be cross-browser.

If you are looking for a dual monitor solution, refer to this answer on SO -> http://stackoverflow.com/a/16861050/1483871. Works great! (credit to http://www.xtf.dk) — Tony M, Jun 06 '13 at 19:35
@Tony: The answer here from @Blender already implements the "dual monitor" code, since he's using `window.screenLeft` and `window.screenTop`. — Doug S, Feb 17 '15 at 00:16

score 37 · Answer 1 · edited Nov 04 '16 at 12:10

37

Here's a demo (should load Google):

function popupwindow(url, title, w, h) {
  wLeft = window.screenLeft ? window.screenLeft : window.screenX;
  wTop = window.screenTop ? window.screenTop : window.screenY;

  var left = wLeft + (window.innerWidth / 2) - (w / 2);
  var top = wTop + (window.innerHeight / 2) - (h / 2);
  return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
}

<button onclick="popupwindow('http://www.google.com/', 'hello', 400, 400)">
   Click
</button>

edited Nov 04 '16 at 12:10

LisaMM

675
1
16
28

answered Apr 15 '11 at 19:32

Blender

289,723
53
439
496

`window.screenTop` and Left are undefined in Firefox 3.6 Ubuntu. Needs to be cross-browser :\ Otherwise, it works in Chrome, which is nice. Also doesn't work in IE under Windows 7 VM. – mpen Apr 15 '11 at 20:52

score 2 · Accepted Answer · answered Apr 15 '11 at 21:18

Here's my method (requires jQuery):

function OpenWindow(params, width, height, name) {
    var screenLeft=0, screenTop=0;

    if(!name) name = 'MyWindow';
    if(!width) width = 600;
    if(!height) height = 600;

    var defaultParams = { }

    if(typeof window.screenLeft !== 'undefined') {
        screenLeft = window.screenLeft;
        screenTop = window.screenTop;
    } else if(typeof window.screenX !== 'undefined') {
        screenLeft = window.screenX;
        screenTop = window.screenY;
    }

    var features_dict = {
        toolbar: 'no',
        location: 'no',
        directories: 'no',
        left: screenLeft + ($(window).width() - width) / 2,
        top: screenTop + ($(window).height() - height) / 2,
        status: 'yes',
        menubar: 'no',
        scrollbars: 'yes',
        resizable: 'no',
        width: width,
        height: height
    };
    features_arr = [];
    for(var k in features_dict) {
        features_arr.push(k+'='+features_dict[k]);
    }
    features_str = features_arr.join(',')

    var qs = '?'+$.param($.extend({}, defaultParams, params));
    var win = window.open(qs, name, features_str);
    win.focus();
    return false;
}

Seems to work in all browsers.

That should be something like this for correct centering... ((screenLeft + ($(window).width() /2)) - (width / 2)) ... ((screenTop + ($(window).height() /2)) - (height / 2)) — Justin Vincent, Apr 13 '14 at 05:28

Citylogic · Answer 3 · 2015-12-19T03:32:25.483

This will center the new popup within the browser window and re-focus if it already exists. If you move the browser window and call the popup again it will just re-center the popup.

JS:

var my_window = null;

function popupwindow(url, title, w, h) 
{
    var screenLeft=0, screenTop=0;
    var windowWidth=0, windowHeight=0;
    var newTop=0, newLeft=0;

    if (typeof window.screenLeft !== 'undefined') 
    {
        screenLeft = window.screenLeft;
        screenTop = window.screenTop;
    } 
    else if(typeof window.screenX !== 'undefined') 
    {
        screenLeft = window.screenX;
        screenTop = window.screenY;
    }

    //console.log(screenLeft + ',' + screenTop);

    windowWidth = window.innerWidth;
    windowHeight = window.innerHeight;

    //console.log(windowWidth + ',' + windowHeight);

    newLeft = screenLeft + (windowWidth / 2) - (w / 2);
    screenTop + (windowHeight / 2);

    if (my_window==null)
    {
        my_window = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + newTop + ', left=' + newLeft);
    }
    else
    {
        if (my_window.closed)
        {
            my_window = null;
            my_window = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + newTop + ', left=' + newLeft);
        }
        else
        {
            my_window.moveTo(newLeft,newTop);
        }
    }

    my_window.focus();

    return false;
}

HTML:

<a href="#" onclick="popupwindow('your_page_here.htm', 'title', 450, 400)">Login</a>

How to center a popup window?

3 Answers3

Linked