ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用してポップアップ ウィンドウを画面の中央に配置するにはどうすればよいですか?
ポップアップ ウィンドウを中央に配置する
ポップアップ ウィンドウを画面上で中央に配置するには、JavaScript の window.open 関数を使用します。ウィンドウが表示される正確な座標 (x と y) は、現在の画面解像度によって異なります。
クロスプラットフォーム ソリューション
次のソリューションは両方で機能します。シングル モニターとデュアル モニターのセットアップ:
<code class="js">const popupCenter = ({ url, title, w, h }) => { // Adjust for dual-screen positions const dualScreenLeft = window.screenLeft || window.screenX; const dualScreenTop = window.screenTop || window.screenY; // Get the screen size const width = window.innerWidth || document.documentElement.clientWidth || screen.width; const height = window.innerHeight || document.documentElement.clientHeight || screen.height; // Calculate the scaling factor const systemZoom = width / window.screen.availWidth; // Calculate the window's position const left = (width - w) / 2 / systemZoom + dualScreenLeft; const top = (height - h) / 2 / systemZoom + dualScreenTop; // Open the popup window const newWindow = window.open(url, title, ` scrollbars=yes, width=${w / systemZoom}, height=${h / systemZoom}, top=${top}, left=${left} `); // Focus the new window if (window.focus) newWindow.focus(); };</code>
使用例
<code class="js">popupCenter({ url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 500, });</code>
クレジット
このソリューションは適応されていますhttp://www.xtf.dk/2011/08/center-new-popup-window-even-on.html より。
以上がJavaScript を使用してポップアップ ウィンドウを画面の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。