पॉपअप विंडो को स्क्रीन के ठीक बीच में कैसे रखें

जावास्क्रिप्ट के window.open फ़ंक्शन का उपयोग करके बनाई गई पॉपअप विंडो को केंद्र में रखें इष्टतम उपयोगकर्ता अनुभव के लिए स्क्रीन आवश्यक है। सटीक निर्देशांक स्क्रीन रिज़ॉल्यूशन पर निर्भर करते हैं, इसलिए एक गतिशील समाधान की आवश्यकता होती है। और डुअल मॉनिटर सेटअप नीचे दिया गया है:

const PopupCenter = ({url, title, w, h }) => { // स्क्रीन रिज़ॉल्यूशन के आधार पर स्थिति निर्धारित करें const DualScreenLeft = window.screenLeft || विंडो.स्क्रीनएक्स; कॉन्स्ट डुअलस्क्रीनटॉप = विंडो.स्क्रीनटॉप || विंडो.स्क्रीनवाई; स्थिरांक चौड़ाई = window.innerWidth || document.documentElement.clientWidth || स्क्रीन.चौड़ाई; स्थिरांक ऊँचाई = window.innerHeight || document.documentElement.clientHeight || स्क्रीन.ऊंचाई; // सिस्टम ज़ूम के लिए समायोजित करें स्थिरांक सिस्टमज़ूम = चौड़ाई / window.screen.availWidth; // केन्द्रित निर्देशांक की गणना करें स्थिरांक बाएँ = (चौड़ाई - w) / 2 / systemZoom DualScreenLeft; स्थिरांक शीर्ष = (ऊंचाई - एच) / 2 / सिस्टमज़ूम डुअलस्क्रीनटॉप; // परिकलित आयामों और स्थिति के साथ पॉपअप विंडो खोलें स्थिरांक newWindow = window.open(यूआरएल, शीर्षक, ` स्क्रॉलबार = हाँ, चौड़ाई = $ {w / systemZoom}, ऊँचाई=${h / systemZoom}, शीर्ष=${शीर्ष}, बाएँ=${बाएँ} ` ); यदि (विंडो.फोकस) newWindow.फोकस(); };

उपयोग उदाहरण:

const popupCenter = ({ url, title, w, h }) => {
    // Determine the positions based on screen resolution
    const dualScreenLeft = window.screenLeft || window.screenX;
    const dualScreenTop = window.screenTop || window.screenY;

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

    // Adjust for system zoom
    const systemZoom = width / window.screen.availWidth;

    // Calculate the centered coordinates
    const left = (width - w) / 2 / systemZoom   dualScreenLeft;
    const top = (height - h) / 2 / systemZoom   dualScreenTop;

    // Open the popup window with the calculated dimensions and positioning
    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 });