屏幕上的弹出窗口居中?

如何将通过javascript window.open函数在屏幕变量中心打开的弹出窗口设置为当前选择的屏幕分辨率?

586159 次浏览
小开

试着这样做:

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);
}
小开

来源: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;
}
小开

它在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);
小开
我的建议是使用顶部位置33%或25%的剩余空间，
，而不是50%的其他例子张贴在这里，
主要是因为窗口标题，
哪个看起来更好更舒服，

< b >完整代码: 

    <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>
< p > < br > < br > 看看这一行:
Var top =(屏幕。高度- h) / 4;// 25% -除以4 |为33% -除以3

小开
最佳答案

单/双监控功能(归功于http://www.xtf.dk -谢谢!)

更新:它也将工作在窗口，没有最大的屏幕的宽度和高度现在感谢@霜!

如果你使用双显示器，窗口将水平居中，而不是垂直居中…使用这个函数来解释这一点。

const popupCenter = ({url, title, w, h}) => {
// Fixes dual-screen position                             Most browsers      Firefox
const dualScreenLeft = window.screenLeft !==  undefined ? window.screenLeft : window.screenX;
const dualScreenTop = window.screenTop !==  undefined   ? window.screenTop  : window.screenY;


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


const systemZoom = width / window.screen.availWidth;
const left = (width - w) / 2 / systemZoom + dualScreenLeft
const top = (height - h) / 2 / systemZoom + dualScreenTop
const newWindow = window.open(url, title,
`
scrollbars=yes,
width=${w / systemZoom},
height=${h / systemZoom},
top=${top},
left=${left}
`
)


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

使用的例子:

popupCenter({url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 500});

CREDIT GOES TO: http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html(我只是想链接到这个页面，但为了防止这个网站崩溃，代码在这里SO，干杯!)

小开 
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来获得宽度和高度的精确整数。

小开

你可以使用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%);


}
小开

由于在多显示器设置中确定当前屏幕中心的复杂性，一个更简单的选择是将弹出窗口置于父窗口的中央。简单地将父窗口作为另一个参数传递:

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

实现:

popupWindow('google.com', 'test', window, 200, 100);
小开

如果你想让它在你当前所在的帧上居中，我推荐这个功能:

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中，它也能工作。

小开

下面是上述解决方案的另一个版本……

const openPopupCenter = (url, title, w, h) => {
const getSpecs = (w, h, top, left) => {
return `scrollbars=yes, width=${w}, height=${h}, top=${top}, left=${left}`;
};


const getFirstNumber = (potentialNumbers) => {
for(let i = 0; i < potentialNumbers.length; i++) {
const value = potentialNumbers[i];


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


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


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


return newWindow;
}
小开

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

基于Facebook的，但使用媒体查询而不是用户代理正则表达式来计算是否有足够的空间(有一些空间)弹出窗口，否则将全屏。不管怎样，Tbh在移动设备上弹出的窗口会作为新标签打开。

function popupCenter(url, title, w, h) {
const hasSpace = window.matchMedia(`(min-width: ${w + 20}px) and (min-height: ${h + 20}px)`).matches;
const isDef = v => typeof v !== 'undefined';
const screenX = isDef(window.screenX) ? window.screenX : window.screenLeft;
const screenY = isDef(window.screenY) ? window.screenY : window.screenTop;
const outerWidth = isDef(window.outerWidth) ? window.outerWidth : document.documentElement.clientWidth;
const outerHeight = isDef(window.outerHeight) ? window.outerHeight : document.documentElement.clientHeight - 22;
const targetWidth = hasSpace ? w : null;
const targetHeight = hasSpace ? h : null;
const V = screenX < 0 ? window.screen.width + screenX : screenX;
const left = parseInt(V + (outerWidth - targetWidth) / 2, 10);
const right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10);
const 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');


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


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


return newWindow;
}
小开

这种混合解决方案对我来说很有效，无论是单屏还是双屏设置

function popupCenter (url, title, w, h) {
// Fixes dual-screen position                              Most browsers      Firefox
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;
const left = (window.screen.width/2)-(w/2) + dualScreenLeft;
const top = (window.screen.height/2)-(h/2) + dualScreenTop;
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);
}
小开

我的ES6 JavaScript版本 在铬和铬双屏幕设置下工作良好 

function openCenteredWindow({url, width, height}) {
const pos = {
x: (screen.width / 2) - (width / 2),
y: (screen.height/2) - (height / 2)
};


const features = `width=${width} height=${height} left=${pos.x} top=${pos.y}`;


return window.open(url, '_blank', features);
}

例子

openCenteredWindow({
url: 'https://stackoverflow.com/',
width: 500,
height: 600
}).focus();
小开 

.center{
left: 50%;
max-width: 350px;
padding: 15px;
text-align:center;
position: relative;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}

小开

(这是在2020年发布的)

CrazyTim的回答的扩展

您还可以将宽度设置为动态大小的百分比(或比率)。 

function popupWindow(url, title, w='75%', h='16:9', opts){
// sort options
let options = [];
if(typeof opts === 'object'){
Object.keys(opts).forEach(function(value, key){
if(value === true){value = 'yes';}else if(value === false){value = 'no';}
options.push(`${key}=${value}`);
});
if(options.length){options = ','+options.join(',');}
else{options = '';}
}else if(Array.isArray(opts)){
options = ','+opts.join(',');
}else if(typeof opts === 'string'){
options = ','+opts;
}else{options = '';}


// add most vars to local object (to shorten names)
let size = {w: w, h: h};
let win = {w: {i: window.top.innerWidth, o: window.top.outerWidth}, h: {i: window.top.innerHeight, o: window.top.outerHeight}, x: window.top.screenX || window.top.screenLeft, y: window.top.screenY || window.top.screenTop}


// set window size if percent
if(typeof size.w === 'string' && size.w.endsWith('%')){size.w = Number(size.w.replace(/%$/, ''))*win.w.o/100;}
if(typeof size.h === 'string' && size.h.endsWith('%')){size.h = Number(size.h.replace(/%$/, ''))*win.h.o/100;}


// set window size if ratio
if(typeof size.w === 'string' && size.w.includes(':')){
size.w = size.w.split(':', 2);
if(win.w.o < win.h.o){
// if height is bigger than width, reverse ratio
size.w = Number(size.h)*Number(size.w[1])/Number(size.w[0]);
}else{size.w = Number(size.h)*Number(size.w[0])/Number(size.w[1]);}
}
if(typeof size.h === 'string' && size.h.includes(':')){
size.h = size.h.split(':', 2);
if(win.w.o < win.h.o){
// if height is bigger than width, reverse ratio
size.h = Number(size.w)*Number(size.h[0])/Number(size.h[1]);
}else{size.h = Number(size.w)*Number(size.h[1])/Number(size.h[0]);}
}


// force window size to type number
if(typeof size.w === 'string'){size.w = Number(size.w);}
if(typeof size.h === 'string'){size.h = Number(size.h);}


// keep popup window within padding of window size
if(size.w > win.w.i-50){size.w = win.w.i-50;}
if(size.h > win.h.i-50){size.h = win.h.i-50;}


// do math
const x = win.w.o / 2 + win.x - (size.w / 2);
const y = win.h.o / 2 + win.y - (size.h / 2);
return window.open(url, title, `width=${size.w},height=${size.h},left=${x},top=${y}${options}`);
}

用法:

// width and height are optional (defaults: width = '75%' height = '16:9')
popupWindow('https://www.google.com', 'Title', '75%', '16:9', {/* options (optional) */});


// options can be an object, array, or string


// example: object (only in object, true/false get replaced with 'yes'/'no')
const options = {scrollbars: false, resizable: true};


// example: array
const options = ['scrollbars=no', 'resizable=yes'];


// example: string (same as window.open() string)
const options = 'scrollbars=no,resizable=yes';
小开

我有一个问题，在外部监视器和window.screenX和window.screenY为负值(-1920，-1200)的中心弹出窗口。我已经尝试了上述所有建议的解决方案，它们在主显示器上运行良好。我想离开

  • 左右边距为200px
  • 顶部和底部的边缘为150像素

以下是对我有效的方法:

 function createPopupWindow(url) {
var height = screen.height;
var width = screen.width;
var left, top, win;


if (width > 1050) {
width = width - 200;
} else {
width = 850;
}


if (height > 850) {
height = height - 150;
} else {
height = 700;
}


if (window.screenX < 0) {
left = (window.screenX - width) / 2;
} else {
left = (screen.width - width) / 2;
}


if (window.screenY < 0) {
top = (window.screenY + height) / 4;
} else {
top = (screen.height - height) / 4;
}


win=window.open( url,"myTarget", "width="+width+", height="+height+",left="+left+",top="+top+"menubar=no, status=no, location=no, resizable=yes, scrollbars=yes");
if (win.focus) {
win.focus();
}
}
小开

这取决于你的屏幕大小

<html>
<body>
<button onclick="openfunc()">Click here to open window at center</button>
<script>
function openfunc() {
windowWidth = 800;
windowHeight = 720;
var left = (screen.width - windowWidth) / 2;
var top = (screen.height - windowHeight) / 4;
var myWindow = window.open("https://www.google.com",'_blank','width=' + windowWidth + ', height=' + windowHeight + ', top=' + top + ', left=' + left);
}
</script>
</body>
</html>
小开

公认的解决方案是无法工作的，除非浏览器占据全屏，

这似乎总是有效的

  const popupCenterScreen = (url, title, w, h, focus) => {
const top = (screen.height - h) / 4, left = (screen.width - w) / 2;
const popup = window.open(url, title, `scrollbars=yes,width=${w},height=${h},top=${top},left=${left}`);
if (focus === true && window.focus) popup.focus();
return popup;
}

Impl:

some.function.call({data: ''})
.then(result =>
popupCenterScreen(
result.data.url,
result.data.title,
result.data.width,
result.data.height,
true));

提交答案