Javascript 如何使弹出窗口居中？

How to center a popup window?

提问by mpen

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 center the popup window within the browser. How can I do that? Needs to be cross-browser.

在屏幕上居中弹出窗口？这些在带多显示器的 Chrome 中不起作用。“屏幕”似乎是指整个桌面，而不仅仅是当前窗口。我想在浏览器中将弹出窗口居中。我怎样才能做到这一点？需要跨浏览器。

采纳答案by mpen

Here's my method (requires jQuery):

这是我的方法（需要 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.

似乎适用于所有浏览器。

回答by Blender

Here's a demo (should load Google):

这是一个演示（应该加载 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>

回答by Citylogic

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:

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:

HTML：

<a href="#" onclick="popupwindow('your_page_here.htm', 'title', 450, 400)">Login</a>