Center a popup window on screen?

Question

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 ?

Answer 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.

const popupCenter = ({url, title, w, h}) => {     // Fixes dual-screen position                             Most browsers      Firefox     const dualScreenLeft = window.screenLeft !==  undefined ? window.screenLeft : window.screenX;     const dualScreenTop = window.screenTop !==  undefined   ? window.screenTop  : window.screenY;      const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;     const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;      const systemZoom = width / window.screen.availWidth;     const left = (width - w) / 2 / systemZoom + dualScreenLeft     const top = (height - h) / 2 / systemZoom + dualScreenTop     const newWindow = window.open(url, title,        `       scrollbars=yes,       width=${w / systemZoom},        height=${h / systemZoom},        top=${top},        left=${left}       `     )      if (window.focus) newWindow.focus(); } 

Usage Example:

popupCenter({url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 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!)

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