Comment positionner une fenêtre popup précisément au centre de l'écran

Centrer une fenêtre popup créée à l'aide de la fonction window.open de JavaScript sur le L’écran est essentiel pour une expérience utilisateur optimale. Les coordonnées exactes dépendent de la résolution de l'écran, une solution dynamique est donc nécessaire.

Solution : utiliser une fonction de moniteur simple/double

Une solution robuste qui s'adapte à la fois aux et les configurations à deux moniteurs sont indiquées ci-dessous :

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();
};

Exemple d'utilisation :

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

Crédits et source :

Cette solution, provenant de http://www.xtf.dk/2011/08/center-new-popup-window-even -on.html, gère efficacement le centrage des fenêtres contextuelles pour une variété de configurations d'écran.