Как мы можем центрировать всплывающее окно, открытое функцией javascript window.open в центре экранной переменной, на текущее выбранное разрешение экрана?
Центрировать всплывающее окно на экране?
Ответ 1
ФУНКЦИЯ ОДИНОЧНОГО/ДВОЙНОГО МОНИТОРА (спасибо 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 : window.screenX;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : window.screenY;
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 systemZoom = width / window.screen.availWidth;
var left = (width - w) / 2 / systemZoom + dualScreenLeft
var top = (height - h) / 2 / systemZoom + dualScreenTop
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w / systemZoom + ', height=' + h / systemZoom + ', 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 (я хотел просто дать ссылку на эту страницу, но на всякий случай код здесь на ТАК, ура!)
Ответ 2
попробуйте сделать это следующим образом:
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);
}
Ответ 3
Из-за сложности определения центра текущего экрана в настройке с несколькими мониторами, более простым вариантом является центрирование всплывающего окна над родительским окном. Просто передайте родительское окно в качестве другого параметра:
function popupWindow(url, title, 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, 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);
}
Реализация:
popupWindow('google.com', 'test', window, 200, 100);
Ответ 4
Источник: 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;
}
Ответ 5
Он отлично работает в 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);
Ответ 6
Если вы хотите сосредоточить его на кадре, в котором вы сейчас находитесь, я бы рекомендовал эту функцию:
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);
}
Аналогично Crazy Tim отвечает, но не использует window.top. Таким образом, он будет работать, даже если окно встроено в iframe из другого домена.
Ответ 7
Моя рекомендация - использовать верхнее местоположение на 33% или 25% из оставшегося пространства, а не на 50%, как другие примеры, размещенные здесь,
главным образом из-за заголовка окна,
которые выглядят лучше и комфортнее для пользователя,
полный код:
<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 top = (screen.height - h)/4;//для 25% - делить на 4 | для 33% - делить на 3
Ответ 8
Вы можете использовать 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%);
}
Ответ 9
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;
}
Ответ 10
Моя версия с ES6 JavaScript.
Хорошо работает на Chrome и Chromium с настройкой двойного экрана.
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();
Ответ 11
Вот альтернативная версия вышеупомянутого решения...
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;
}
}
}
}
Ответ 12
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 для получения точного целого числа ширины и высоты.
Ответ 13
Основан на Facebook, но использует медиа-запрос, а не регулярное выражение пользовательского агента, чтобы вычислить, достаточно ли места (с небольшим пространством) для всплывающего окна, в противном случае переходит в полноэкранный режим. Все равно всплывающие окна на мобильном телефоне открываются как новые вкладки.
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;
}
Ответ 14
Это гибридное решение работало для меня как на одном, так и на двух экранах.
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);
}
Ответ 15
.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%);
}