Comment centrer une fenêtre contextuelle dans le navigateur ?

Comment positionner une fenêtre popup avec précision au centre de l'écran

Centrage d'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 données ci-dessous :

<code class="javascript">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();
};</code>

Exemple d'utilisation :

<code class="javascript">popupCenter({ url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 500 }); </code>

Crédits et source :

Cette solution, originaire 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!