如何让弹出窗口居中显示？

Question

如何使弹出窗口居中显示？ 这些方法在Chrome多显示器环境下不能正常工作。 "screen"似乎是指整个桌面，而不仅仅是当前窗口。 我想让弹出窗口在浏览器内居中显示。 有什么办法吗？需要跨浏览器支持。

- mpen

---

如果您正在寻找双显示器解决方案，请参考SO上的此答案-> https://dev59.com/PW855IYBdhLWcg3w75Eu#16861050。非常好用！（感谢http://www.xtf.dk） - Tony M

@Tony：这里@Blender的答案已经实现了“双显示器”代码，因为他使用了window.screenLeft和window.screenTop。 - Doug S

Answer 1

Here's a demo (should load 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>

- Blender

---

window.screenTop 和 Left 在 Firefox 3.6 Ubuntu 中未定义。需要跨浏览器：）否则，它在 Chrome 中运行良好，这很好。也无法在 Windows 7 VM 下的 IE 中工作。 - mpen

Answer 2

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

在所有浏览器中似乎都可以正常工作。

- mpen

---

这应该是正确居中的代码： ((screenLeft + ($(window).width() /2)) - (width / 2)) ... ((screenTop + ($(window).height() /2)) - (height / 2)) - Justin Vincent

@JustinVincent a + b/2 - c/2 == a + (b-c)/2。 - mpen

Answer 3

这将使新弹出窗口在浏览器窗口中居中，并在已存在时重新聚焦。如果您移动浏览器窗口并再次调用弹出窗口，则只会重新居中弹出窗口。

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：

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

- Citylogic