Center a Popup Window on Screen

Center a popup window on screen?

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

How to center the pop up window? Image that open a pop up

How about a javascript to help you, The javacsript calculates the center of the screen and palces the window there.

       <!DOCTYPE html>
<html>
   <body>
      <script>
         function myPopup(myURL, title, myWidth, myHeight) {
            var left = (screen.width - myWidth) / 2;
            var top = (screen.height - myHeight) / 4;
            var myWindow = window.open(myURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + myWidth + ', height=' + myHeight + ', top=' + top + ', left=' + left);
         }
      </script>
<center>Supporto Live Chat<br>      
        <a onclick=" myPopup ('https://google.com/','Live Chat', 500, 715);"><img 
        class="wp-image-1182 aligncenter" alt="live-butt" 
        src="https://cdn.pixabay.com/photo/2016/06/06/16/39/phone-1439839_960_720.png" 
        width="142" height="75" /></a>
      </center>
   </body>
</html>

How to make popup look at the centre of the screen?

These are the changes to make:

CSS:

#container {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    visibility: hidden;
    display: none;
    background-color: rgba(22,22,22,0.5); /* complimenting your modal colors */
}
#container:target {
    visibility: visible;
    display: block;
}
.reveal-modal {
    position: relative;
    margin: 0 auto;
    top: 25%;
}
    /* Remove the left: 50% */

HTML:

<a href="#container">Reveal</a>
<div id="container">
    <div id="exampleModal" class="reveal-modal">
    ........
    <a href="#">Close Modal</a>
    </div>
</div>

JSFiddle - Updated with CSS only

Open new window on center of screen with this javascript?

How's this (adapted from here):

function MyPopUpWin(url, width, height) {
    var leftPosition, topPosition;
    //Allow for borders.
    leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
    //Allow for title and status bars.
    topPosition = (window.screen.height / 2) - ((height / 2) + 50);
    //Open the window.
    window.open(url, "Window2",
    "status=no,height=" + height + ",width=" + width + ",resizable=yes,left="
    + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY="
    + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");
}

Call it by replacing window.open(twtLink,'','width=300,height=300'); in your code with MyPopUpWin(twtLink, 300, 300);

Window.popup in center align in browser

    var left = (window.screen.width / 2) - ((w / 2) + 10);
    var top = (window.screen.height / 2) - ((h / 2) + 50);

window.open('','',
    "status=no,height=" + height + ",width=" + width + ",resizable=yes,left="
    + left + ",top=" + top + ",screenX=" + left + ",screenY="
    + top + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");

How to center a popup window?

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.

Pop up window needs centering on screen

Used Ajax comboBox.....worked nicely

Center Popup in Current Window

I'd rather not have to answer my own question again, but I've figured out how to do it, and this method isn't in any of the answers. Anyway, the idea is actually rather simple. First determine the dimensions of the popup, which in my case is 1280px x 720px. Then give the popup this css (in context):

position:fixed;
top:50%;
left:50%;
margin:-360px 0 0 -640px;

What this does is set the position of the popup's top-left corner at the center of the screen, and then set the left and top dimensions of the popup back by half of its own dimensions, effectively moving the center of the popup to the center of the screen. To use this method yourself, all you need to do is adjust the various dimensions accordingly.

Center a Popup Window on Screen