जवाबों:
एकल / युगल निर्देशक समारोह (श्रेय http://www.xtf.dk - धन्यवाद!)
अद्यतन: यह उन खिड़कियों पर भी काम करेगा जो स्क्रीन की चौड़ाई और ऊँचाई के लिए अधिकतम नहीं हैं अब @Frost के लिए धन्यवाद!
यदि आप दोहरे मॉनिटर पर हैं, तो विंडो क्षैतिज रूप से केंद्र में होगी, लेकिन लंबवत नहीं ... इस फ़ंक्शन का उपयोग उसके लिए खाते में करें।
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}); क्रेडिट जाता है: http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html (मैं तो बस इस पृष्ठ पर बाहर से जोड़ने के लिए चाहता था, लेकिन सिर्फ मामले में इस वेबसाइट नीचे चला जाता है कोड SO, चीयर्स पर यहाँ है! "
इसे इस तरह आज़माएं:
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);
} मल्टी-मॉनिटर सेटअप में वर्तमान स्क्रीन के केंद्र का निर्धारण करने की जटिलता के कारण, एक आसान विकल्प मूल विंडो पर पॉप-अप को केंद्रित करना है। बस दूसरे पैरामीटर के रूप में मूल विंडो पास करें:
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);स्रोत: 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;
} यदि आप इसे उस फ़्रेम पर केंद्रित करना चाहते हैं, जो आप वर्तमान में हैं, तो मैं इस फ़ंक्शन की अनुशंसा करूंगा:
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 का उपयोग नहीं करता है। इस तरह, यह तब भी काम करेगा जब विंडो एक अलग डोमेन से आईफ्रेम में एम्बेडेड हो।
यह फ़ायरफ़ॉक्स में बहुत अच्छा काम करता है।
बस शीर्ष चर को किसी अन्य नाम में बदलें और पुनः प्रयास करें
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);Number(...)।
मेरी सिफारिश शेष स्थान से शीर्ष स्थान 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 से डिवाइड
फेसबुक अपने लॉगिन पॉपअप विंडो की स्थिति के लिए निम्नलिखित एल्गोरिथ्म का उपयोग करता है:
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;
}आप इसे करने के लिए सीएसएस का उपयोग कर सकते हैं, बस निम्नलिखित गुणों को पॉपअप के केंद्र में रखा जा सकता है
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 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;
}
}
}
}ईएस 6 जावास्क्रिप्ट के साथ मेरा संस्करण।
दोहरी स्क्रीन सेटअप के साथ क्रोम और क्रोमियम पर अच्छी तरह से काम करता है।
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();(यह 2020 में पोस्ट किया गया था)
क्रेजीटीम के उत्तर का विस्तार
आप डायनामिक आकार के लिए चौड़ाई को प्रतिशत (या अनुपात) पर भी सेट कर सकते हैं। पूर्ण आकार अभी भी स्वीकार किया जाता है।
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';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चौड़ाई और ऊंचाई का सटीक पूर्णांक प्राप्त करने के लिए उपयोग करना होगा।
फेसबुक के आधार पर, लेकिन पॉपअप के लिए पर्याप्त जगह (कुछ जगह के साथ) होने पर उपयोगकर्ता एजेंट regex के बजाय मीडिया क्वेरी का उपयोग करता है, अन्यथा पूर्ण स्क्रीन पर चला जाता है। मोबाइल पर 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);
}मेरे पास बाहरी मॉनिटर और window.screenX और window.screenY में एक पॉपअप विंडो को केंद्रित करने के साथ एक मुद्दा था । क्रमशः नकारात्मक मूल्य (-1920, -1200) थे। मैंने सुझाए गए सभी समाधानों के ऊपर प्रयास किया है और उन्होंने प्राथमिक मॉनिटरों में अच्छा काम किया है। मैं छोड़ना चाहता था
यहाँ मेरे लिए क्या काम किया गया है:
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();
}
}.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%);
}