Heim  >  Artikel  >  Web-Frontend  >  Wie zentriere ich ein Popup-Fenster auf dem Bildschirm sowohl bei Einzel- als auch bei Doppelmonitor-Setups?

Wie zentriere ich ein Popup-Fenster auf dem Bildschirm sowohl bei Einzel- als auch bei Doppelmonitor-Setups?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-31 19:11:02406Durchsuche

How to Center a Popup Window on Screen in Both Single and Dual Monitor Setups?

So zentrieren Sie ein Popup-Fenster auf dem Bildschirm

Um ein Popup-Fenster auf dem Bildschirm zu zentrieren, können wir die window.open-Funktion von JavaScript und einige zusätzliche Berechnungen verwenden, um die genaue Position zu ermitteln x- und y-Koordinaten basierend auf der aktuellen Bildschirmauflösung.

Einzel-/Doppelmonitorfunktion

Für Einzel- und Doppelmonitor Setups zentriert die folgende Funktion das Popup-Fenster effektiv horizontal und berücksichtigt dabei die Möglichkeit, dass es nicht vollständig maximiert wird:

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

  // Calculate available screen dimensions
  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 centered coordinates
  const left = (width - w) / 2 / systemZoom + dualScreenLeft
  const top = (height - h) / 2 / systemZoom + dualScreenTop

  // Open the new window
  const newWindow = window.open(url, title, 
    `
    scrollbars=yes,
    width=${w / systemZoom}, 
    height=${h / systemZoom}, 
    top=${top}, 
    left=${left}
    `
  )

  // Bring the new window to focus
  if (window.focus) newWindow.focus();
}</code>

Verwendungsbeispiel

So zentrieren Sie ein Popup-Fenster bei einer Bildschirmauflösung von 900 x 500 mit der Titel „XTF“:

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

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Popup-Fenster auf dem Bildschirm sowohl bei Einzel- als auch bei Doppelmonitor-Setups?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn