如何基于父窗口innerHeight实现Popup弹出子窗口居中显示

你当前使用的代码计算逻辑存在偏差，top和left的取值没有结合父窗口的实际屏幕位置，也没有做浏览器兼容性处理，无法在所有浏览器中实现一致的居中效果。

正确实现逻辑如下：

• 先兼容获取当前父窗口的屏幕坐标、视口宽高参数
• 根据需求设置子窗口宽高后，计算居中对应的top、left值
• 子窗口宽高超出屏幕范围时做边界校验，避免弹窗超出可视区域

var new_window;
function winOpen(targetUrl) {
    // 定义子窗口宽高，可按需调整
    const childWidth = window.innerWidth - 100;
    const childHeight = window.innerHeight - 120;
    
    // 兼容获取父窗口在屏幕中的左上角坐标
    const parentLeft = window.screenLeft || window.screenX;
    const parentTop = window.screenTop || window.screenY;
    // 兼容获取父窗口视口宽高
    const parentWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    const parentHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    
    // 计算子窗口居中的坐标
    const childLeft = parentLeft + (parentWidth - childWidth) / 2;
    const childTop = parentTop + (parentHeight - childHeight) / 2;
    
    // 边界校验，避免子窗口超出屏幕可视范围
    const finalLeft = Math.max(0, childLeft);
    const finalTop = Math.max(0, childTop);
    
    new_window = window.open(
        targetUrl,
        "_blank",
        `toolbar=0,help=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=${childWidth},height=${childHeight},top=${finalTop},left=${finalLeft}`
    );
}

// 调用示例
// winOpen('https://www.google.com')

如果需要适配弹窗相对于整个屏幕居中，只需要将parentLeft和parentTop取值改为0，parentWidth和parentHeight替换为screen.width和screen.height即可。

内容的提问来源于stack exchange，提问作者user1124166