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 cen

Answer 1

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.

Answer 2

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>

Answer 3

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>