スクロールバーの幅を考慮してポップアップウインドウを開く方法（2023/12/17）

画像サイズに合わせてポップアップウインドウを開きたい。これはパソコン画面に対して画像のサイズが小さければ、なんのテクニックもなしに簡単にできる。しかし、画像の高さが大きい場合、ブラウザによって縦スクロールバーの幅が異なるため、何らかの細工が必要となる。

画像サイズを幅720px×高さ840pxとし、周囲に10pxの余白をとる。ポップアップウインドウの高さは、縦が800pxのディスプレイでもはみ出さないよう772pxとする。JAVASCRIPT でポップアップウインドウを開く。 window.open("url.html", "subwindow", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, width=740, height=772, left=0, top=0"); なにも対策を施さない場合ポップアップウインドウを表示、Firefox では問題なく表示されるが、他のブラウザでは左右の余白がなくなってしまう。

そこで、スクロールバーの幅の分を調整してみる。 1. CSS で調整する方法ポップアップウインドウを表示 　.image{ /* 画像要素 */ 　  position: absolute; 　  top: 10px; 　  left: 10px; 　  width: calc(720px - calc(100vw - 100%)); 　} 　@-moz-document url-prefix() { /* Firefox のみ */ 　  .image { 　    width: 720px; 　  } 　} 　.wrap{ /* 親要素 */ 　  position: relative; 　  margin: 0; 　  width: 100%; 　} この方法は一見良さそうだが、Firefox 以外では画像サイズがオリジナルから縮小されるので、鮮明度が若干低下する。

2. JAVASCRIPT で調整する方法結果を表示 　var mywidth = 740 + window.innerWidth - document.body.clientWidth; /* add scrfoll bar width */ 　window.open("url.html", "subwindow", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, width=" + mywidth + ", height=772, left=0, top=0");

ブラウザとバージョンを選ばず対応でき、コードもシンプル。これで決まり。 なお、忘備録として JAVASCRIPT でブラウザを判定して条件分けする方法を書き留めておく。ただし、コードが長ったらしくなり、Firefox のバージョンも判別できないので、あえて採用するメリットはない。 var userAgent = window.navigator.userAgent.toLowerCase(); var mywidth = 740 + window.innerWidth - document.body.clientWidth; if(userAgent.indexOf('firefox') != -1 || userAgent.indexOf('trident') != -1) {   window.open("url.html", "subwindow", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, width=740, height=772, left=0, top=0"); else {   window.open("url.html", "subwindow", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, width=" + mywidth + ", height=772, left=0, top=0");   } }

© On This Planet