Center a popup window on screen?

前端 未结 18 1104
一整个雨季
一整个雨季 2020-11-22 16:51

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 ?

18条回答
  •  醉酒成梦
    2020-11-22 17:41

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

提交回复
热议问题