উত্তর:
একক / ডুয়াল মনিটর ফাংশন ( 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}); ক্রেডিট এখানে যান: http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html (আমি কেবল এই পৃষ্ঠার সাথে লিঙ্ক করতে চেয়েছিলাম তবে এই ওয়েবসাইটটি নীচে নেমে গেলে কোড এখানে এসও, চিয়ার্সে রয়েছে!)
এটির মতো চেষ্টা করুন:
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);
} ক্রেজি টিমের উত্তরের মতো, তবে উইন্ডো.টপ ব্যবহার করে না। এইভাবে, উইন্ডোটি কোনও অন্য ডোমেন থেকে একটি আইফ্রেমে এম্বেড করা থাকলেও এটি কাজ করবে।
এটি ফায়ারফক্সে খুব ভাল কাজ করে।
কেবল শীর্ষ ভেরিয়েবলটি অন্য কোনও নামে পরিবর্তন করুন এবং আবার চেষ্টা করুন
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 শীর্ষ = (স্ক্রিন.হাইট - এইচ) / 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;
}
}
}
}ES6 জাভাস্ক্রিপ্ট সহ আমার সংস্করণ।
ডুয়াল স্ক্রিন সেটআপ সহ ক্রোম এবং ক্রোমিয়ামে ভাল কাজ করে।
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প্রস্থ এবং উচ্চতার সঠিক পূর্ণসংখ্যার জন্য আপনাকে ব্যবহার করতে হবে ।
ফেসবুকের উপর ভিত্তি করে তবে পপআপের জন্য পর্যাপ্ত জায়গা (কিছু জায়গা সহ) আছে কিনা তা গণনা করতে ব্যবহারকারী এজেন্ট রেজেক্সের চেয়ে একটি মিডিয়া ক্যোয়ারী ব্যবহার করে, অন্যথায় পূর্ণ স্ক্রিনে যায়। মোবাইলে টিবিএইচ পপআপগুলি যাইহোক নতুন ট্যাব হিসাবে খোলা।
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%);
}