1. 首页
  2. 问答
  3. 在屏幕上居中显示一个弹出窗口？

在屏幕上居中显示一个弹出窗口？

2010-11-01 77 views

回答

336

单/双头显示功能（信贷http://www.xtf.dk - 谢谢！）

更新：它还将在未刷爆屏幕的窗口工作宽度和高度，现在感谢@Frost！

如果您使用的是双显示器，则窗口将水平居中，但不垂直...使用此功能来说明这一点。

function PopupCenter(url, title, w, h) { 
    // Fixes dual-screen position       Most browsers  Firefox 
    var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left; 
    var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top; 

    var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width; 
    var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height; 

    var left = ((width/2) - (w/2)) + dualScreenLeft; 
    var top = ((height/2) - (h/2)) + dualScreenTop; 
    var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); 

    // Puts focus on the newWindow 
    if (window.focus) { 
     newWindow.focus(); 
    } 
}

用法示例：

PopupCenter('http://www.xtf.dk','xtf','900','500');

幸得：http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html（我想只是链接了该网页，但以防万一，本网站宕机的代码是在这里对SO，欢呼！）

来源

2013-05-31 15:40:33

+33

这是一个很好的解决方案，应该得到一些更多的认可 – Jim 2013-06-05 23:53:41

+6

经过一番玩，这不像我想的那样好。更简单的例外答案效果更好。这仅适用于启动页面最大化的情况。 – Bart 2013-09-19 20:02:24

+5

感谢您的信用，我已经使我的示例工作在最小化窗口现在：http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html – Frost 2013-11-05 11:42:56

303

尝试这样的：

function popupwindow(url, title, w, h) { 
    var left = (screen.width/2)-(w/2); 
    var top = (screen.height/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); 
}

来源

2010-11-01 11:18:32 oezi

+14

此功能不会在双工作监视器设置。我已经发布了一个单一和双显示器解决方案。 – 2013-05-31 15:41:19

+1

我想确认一下：var left =（screen.width/2） - （w/2）; var top =（screen.height/2） - （h/2）;是不是会返回左= 0和顶= 0？假设w等于screen.width，h等于screen.height ...我是对还是错？ – mutanic 2013-06-03 05:03:15

+1

@mutanic w/h指的是弹出窗口的大小，而不是屏幕。 – Mahn 2013-08-25 12:54:11

21

来源：http://www.nigraphic.com/blog/java-script/how-open-new-window-popup-center-screen

function PopupCenter(pageURL, title,w,h) { 
    var left = (screen.width/2)-(w/2); 
    var top = (screen.height/2)-(h/2); 
    var targetWin = window.open (pageURL, 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); 
    return targetWin; 
}

来源

2010-11-01 11:18:37 OmnipotentEntity

+0

这不适用于Chrome – Adrian 2012-06-20 09:48:23

+0

不适用于FF – 2012-08-10 23:05:38

11

它的工作原理相当不错，在Firefox浏览器。
顶部变量只是更改为任何其他名称，然后再试一次

 var w = 200; 
     var h = 200; 
     var left = Number((screen.width/2)-(w/2)); 
     var tops = Number((screen.height/2)-(h/2)); 

window.open("templates/sales/index.php?go=new_sale", '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+tops+', left='+left);

来源

2012-11-29 10:00:09 user1862764

+3

执行'Number（...）'完全没有必要。 – gustavohenke 2013-11-13 18:49:31

5

我的建议是使用顶部位置33％或25％的剩余空间，
，而不是50％作为其他例子贴在这里，
01：主要是窗口标题，
哪个更好看，更舒适的用户，

完整的代码，因为 

<script language="javascript" type="text/javascript"> 
     function OpenPopupCenter(pageURL, title, w, h) { 
      var left = (screen.width - w)/2; 
      var top = (screen.height - h)/4; // for 25% - devide by 4 | for 33% - devide by 3 
      var targetWin = window.open(pageURL, 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); 
     } 
    </script> 
</head> 
<body> 
    <button onclick="OpenPopupCenter('http://www.google.com', 'TEST!?', 800, 600);">click on me</button> 
</body> 
</html>



退房这一行：
VAR顶部=（screen.height - H）/ 4; // 25％ - 由4 |分开33％ - devide 3

来源

2013-05-09 10:15:41

1 
function fnPopUpWindow(pageId) { 
    popupwindow("hellowWorld.php?id="+pageId, "printViewer", "500", "300"); 
} 

function popupwindow(url, title, w, h) { 
    var left = Math.round((screen.width/2)-(w/2)); 
    var top = Math.round((screen.height/2)-(h/2)); 
    return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, ' 
      + 'menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=' + w 
      + ', height=' + h + ', top=' + top + ', left=' + left); 
} 

<a href="javascript:void(0);" onclick="fnPopUpWindow('10');">Print Me</a>

注意：您必须使用Math.round来获取宽度和高度的确切整数。

来源

2015-05-03 12:29:06

3

您可以使用CSS来做到这一点，只是给下列属性的元素放置在弹出

element{ 

position:fixed; 
left: 50%; 
top: 50%; 
-ms-transform: translate(-50%,-50%); 
-moz-transform:translate(-50%,-50%); 
-webkit-transform: translate(-50%,-50%); 
transform: translate(-50%,-50%); 

}

来源

2015-07-08 09:53:27

22

中心由于确定在当前屏幕中心的复杂性多监视器设置，更简单的选项是将弹出窗口居中置于父窗口之上。只要父窗口传递的另一个参数：

function popupwindow(url, title, win, w, h) { 
    var y = win.top.outerHeight/2 + win.top.screenY - (h/2) 
    var x = win.top.outerWidth/2 + win.top.screenX - (w/2) 
    return win.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+y+', left='+x); 
}

来源

2015-08-27 23:54:05 CrazyTim

+0

这似乎是Facebook用于分享按钮弹出窗口的技术。 – 2016-02-25 14:43:26

9

如果要居中您目前在框架上，我会推荐这个功能：

function popupwindow(url, title, w, h) { 
    var y = window.outerHeight/2 + window.screenY - (h/2) 
    var x = window.outerWidth/2 + window.screenX - (w/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=' + y + ', left=' + x); 
}

类似疯狂添的回答，但不使用window.top。这样，即使窗口嵌入在来自不同域的iframe中，它也可以工作。

来源

2016-01-20 16:25:45 Taugenichts

2

这里是上述方案的替代版本...

function openPopupCenter(url, title, w, h) { 
    // Fixes dual-screen position 
    // Most browsers use window.screenLeft 
    // Firefox uses screen.left 
    var dualScreenLeft = getFirstNumber(window.screenLeft, screen.left), 
    dualScreenTop = getFirstNumber(window.screenTop, screen.top), 
    width = getFirstNumber(window.innerWidth, document.documentElement.clientWidth, screen.width), 
    height = getFirstNumber(window.innerHeight, document.documentElement.clientHeight, screen.height), 
    left = ((width/2) - (w/2)) + dualScreenLeft, 
    top = ((height/2) - (h/2)) + dualScreenTop, 
    newWindow = window.open(url, title, getSpecs()); 

    // Puts focus on the newWindow 
    if (window.focus) { 
    newWindow.focus(); 
    } 

    return newWindow; 

    function getSpecs() { 
    return 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left; 
    } 

    function getFirstNumber() { 
    for(var i = 0, len = arguments.length; i < len; i++) { 
     var value = arguments[i]; 

     if (typeof value === 'number') { 
     return value; 
     } 
    } 
    } 
}

来源

2016-04-19 15:42:41

1

Facebook的使用下面的算法来定位自己的登录弹出窗口：

function PopupCenter(url, title, w, h) { 
    var userAgent = navigator.userAgent, 
     mobile = function() { 
     return /\b(iPhone|iP[ao]d)/.test(userAgent) || 
      /\b(iP[ao]d)/.test(userAgent) || 
      /Android/i.test(userAgent) || 
      /Mobile/i.test(userAgent); 
     }, 
     screenX = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft, 
     screenY = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop, 
     outerWidth = typeof window.outerWidth != 'undefined' ? window.outerWidth : document.documentElement.clientWidth, 
     outerHeight = typeof window.outerHeight != 'undefined' ? window.outerHeight : document.documentElement.clientHeight - 22, 
     targetWidth = mobile() ? null : w, 
     targetHeight = mobile() ? null : h, 
     V = screenX < 0 ? window.screen.width + screenX : screenX, 
     left = parseInt(V + (outerWidth - targetWidth)/2, 10), 
     right = parseInt(screenY + (outerHeight - targetHeight)/2.5, 10), 
     features = []; 
    if (targetWidth !== null) { 
    features.push('width=' + targetWidth); 
    } 
    if (targetHeight !== null) { 
    features.push('height=' + targetHeight); 
    } 
    features.push('left=' + left); 
    features.push('top=' + right); 
    features.push('scrollbars=1'); 

    var newWindow = window.open(url, title, features.join(',')); 

    if (window.focus) { 
    newWindow.focus(); 
    } 

    return newWindow; 
}

来源

2018-01-25 08:06:01

相关问题

 相关问题