[解決済み】ポップアップウィンドウを画面中央に表示する?
2022-03-27 07:52:48
質問
javascriptで開いたポップアップウィンドウを中央に配置するにはどうしたらよいでしょうか。
window.open
関数は、現在選択されている画面解像度に対応した画面中央の変数を使用しますか?
解決方法は?
シングル/デュアルモニター機能 (クレジット http://www.xtf.dk - ありがとうございました!)
UPDATE: @Frostのおかげで、画面の幅と高さが最大でないウィンドウでも動作するようになりました!
デュアルモニタの場合、ウィンドウは水平方向にはセンタリングされますが、垂直方向にはされません...この機能を使用して、それを考慮してください。
const popupCenter = ({url, title, w, h}) => {
// Fixes dual-screen position Most browsers Firefox
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;
const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
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();
}
使用例です。
popupCenter({url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 500});
credit goes to: http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html (このページにリンクしたかったのですが、このウェブサイトがダウンした場合に備えて、コードはSOのここにあります、乾杯!)
関連
-
[解決済み】TypeError:res.jsonは関数ではありません。
-
[解決済み] [Solved] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングする
-
[解決済み】中央値の計算 - javascript
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] JavaScriptでURLをエンコードする?
-
[解決済み] JavaScriptで変数が文字列かどうかをチェックする
-
[解決済み] JavaScriptでドロップダウンリストの選択値を取得する
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React Js: Uncaught (in promise) SyntaxError: 位置 0 の JSON で予期しないトークン < が発生しました。
-
[解決済み】document.getElementByIDは関数ではありません。
-
[解決済み】TypeError: 'undefined'はオブジェクトではありません。
-
[解決済み】XMLHttpRequestモジュールが定義されていない/見つからない
-
[解決済み】Javascriptのコールバック関数がFirefoxで「Callback is not a function」というエラーを投げる
-
[解決済み】ある要素が可視DOMに存在するかどうかを確認するにはどうすればいいですか?
-
[解決済み】JavaScriptのボタンonclickが機能しない
-
[解決済み] [Solved] Uncaught TypeError: nullのプロパティ 'appendChild' を読み取ることができない。
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み】TypeError:res.jsonは関数ではありません。