Center a popup window on screen?

Center a popup window on screen?

How can we center a popup window opened via javascript window.open function on the center of screen variable to the currently selected screen resolution ?

Solutions/Answers:

Solution 1:

SINGLE/DUAL MONITOR FUNCTION (credit to http://www.xtf.dk – thank you!)

UPDATE: It will also work on windows that aren’t maxed out to the screen’s width and height now thanks to @Frost!

If you’re on dual monitor, the window will center horizontally, but not vertically… use this function to account for that.

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);

    // Puts focus on the newWindow
    if (window.focus) newWindow.focus();
}

Usage Example:

PopupCenter('http://www.xtf.dk','xtf','900','500');  

CREDIT GOES TO: http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html (I wanted to just link out to this page but just in case this website goes down the code is here on SO, cheers!)

Related:  Use jQuery to scroll to the bottom of a div with lots of text

Solution 2:

try it like this:

function popupwindow(url, title, w, h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/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);
} 

Solution 3:

Due to the complexity of determining the center of the current screen in a multi-monitor setup, an easier option is to center the pop-up over the parent window. Simply pass the parent window as another parameter:

function popupwindow(url, title, win, w, h) {
    var y = win.top.outerHeight / 2 + win.top.screenY - ( h / 2)
    var x = win.top.outerWidth / 2 + win.top.screenX - ( w / 2)
    return win.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+y+', left='+x);
} 

Solution 4:

Source: http://www.nigraphic.com/blog/java-script/how-open-new-window-popup-center-screen

function PopupCenter(pageURL, title,w,h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  var targetWin = window.open (pageURL, 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);
  return targetWin;
} 

Solution 5:

It works very well in Firefox.
Just change the top variable to any other name and try again

        var w = 200;
        var h = 200;
        var left = Number((screen.width/2)-(w/2));
        var tops = Number((screen.height/2)-(h/2));

window.open("templates/sales/index.php?go=new_sale", '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+tops+', left='+left);

Solution 6:

If you want to center it on the frame you are currently in, I would recommend this function:

function popupwindow(url, title, w, h) {
    var y = window.outerHeight / 2 + window.screenY - ( h / 2)
    var x = window.outerWidth / 2 + window.screenX - ( w / 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=' + y + ', left=' + x);
} 

Similar to Crazy Tim’s answer, but doesn’t use window.top. This way, it will work even if the window is embedded in an iframe from a different domain.

Related:  d3.select by attribute value