Maison > interface Web > js tutoriel > le corps du texte

Comment centrer une fenêtre contextuelle sur l'écran de l'utilisateur à l'aide de JavaScript ?

DDD
Libérer: 2024-11-01 06:33:02
original
1000 Les gens l'ont consulté

How to Center a Popup Window in the User's Screen Using JavaScript?

Comment centrer une fenêtre contextuelle dans l'écran de l'utilisateur à l'aide de JavaScript

Pour centrer une fenêtre contextuelle ouverte à l'aide de la fonction window.open, c'est Il est important de prendre en compte la résolution actuelle de l'écran de l'utilisateur. Voici une solution qui centre efficacement la fenêtre sur les configurations à un ou deux moniteurs :

<code class="javascript">const popupCenter = ({url, title, w, h}) => {
    // Handle dual-screen position
    const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
    const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;

    // Get browser window dimensions
    const width = window.innerWidth || document.documentElement.clientWidth || screen.width;
    const height = window.innerHeight || document.documentElement.clientHeight || screen.height;

    // Account for system zoom to obtain accurate dimensions
    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();
}</code>
Copier après la connexion

Exemple d'utilisation :

<code class="javascript">popupCenter({url: 'http://www.example.com', title: 'Popup Window', w: 500, h: 300}); </code>
Copier après la connexion

Cet extrait de code ouvre une fenêtre contextuelle fenêtre centrée sur l'écran de l'utilisateur, avec une URL, un titre, une largeur et une hauteur spécifiés.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal