Question

Center a popup window on screen?这些在Chrome w / multimonitor中不起作用。 “屏幕”似乎指的是整个桌面，而不仅仅是当前窗口。我想将弹出窗口置于浏览器中心。我怎样才能做到这一点？需要跨浏览器。

Answer 1

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

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

似乎适用于所有浏览器。

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>

如何将弹出窗口居中？

3 个答案: