画面の中央にサブウインドウを表示させる方法

JavaScriptを使ってブラウザで小さなウインドウ(サブウインドウ)を表示しようとする際には、表示位置を画面の中央にしたいと思うことがあります。
JavaScriptを使ってウインドウを開く場合、ウインドウのサイズだけでなく表示座標も指定できます。ですから、閲覧者の画面サイズ(※表示可能領域のサイズ)を取得した上で簡単な計算をすれば、望みのサブウインドウを画面中央に表示できます。

画面サイズ(表示可能領域のサイズ)を取得するには、以下のようにscreenオブジェクトのavailWidthプロパティとavailHeightプロパティを使います。

var sw = screen.availWidth;  // 表示可能領域の横幅
var sh = screen.availHeight; // 表示可能領域の高さ


画面の横幅と高さを取得するには、WidthプロパティとHeightプロパティがあります。
しかし、これらのプロパティだと「タスクバーなどのようなアプリケーションの表示には使えない領域」も含んだサイズが返ってきます。
タスクバーやツールバーが細い場合にはあまり影響はないかも知れませんが、(Windows Vistaのように画面横に太いバーがあるような場合は特に)「画面全体」よりは「表示可能領域」を基準にした方が、真ん中っぽく見える気がします。
というわけで、画面内で「ウインドウの表示に利用できる空間」を取得するには、上記のようにavailWidthプロパティとavailHeightプロパティを使うのが良さげです。

※JavaScriptを使って任意の小さなウインドウを開く方法は、別途「サブウインドウを開く」で解説済みなのでここでは割愛します。詳しくはそちらをご参照下さい。
あとは、閲覧者の画面サイズと表示したいサブウインドウのサイズから、サブウインドウを表示する座標を計算すれば良いでしょう。

画面の中央に表示されるよう座標を計算する

仮に今、横360px×縦240pxの小さなサブウインドウを表示したいとします。
このウインドウを、画面中央(表示可能領域の中央)に表示させるには、以下のような計算が必要です。

• サブウインドウ左上のX座標 ＝ (［画面(表示可能領域)の横幅］－［サブウインドウの横幅］) ÷ 2
• サブウインドウ左上のY座標 ＝ (［画面(表示可能領域)の高さ］－［サブウインドウの高さ］) ÷ 2

この計算を、JavaScriptソースにすると以下のようになります。

var subx = ( screen.availWidth - 360 ) / 2;
var suby = ( screen.availHeight - 240 ) / 2;


これで、変数subxとsubyには「サブウインドウを表示する座標(サブウインドウ左上の座標)」が格納されます。
変数subxがX座標、変数subyがY座標です。

実際に画面中央にサブウインドウを表示させるJavaScriptソース

サブウインドウを開くには、windowオブジェクトのopenメソッドを使います。
細かなオプションについては、記事「サブウインドウを開く」で解説しているのでここでは省きます。
画面の中央にサブウインドウを表示させるには、以下のようなJavaScriptソースを記述します。

function ShowSubWindow() {
   // サブウインドウの設定
   var subw = 360;   // サブウインドウの横幅
   var subh = 240;   // サブウインドウの高さ
   var subp = "sample.html";   // 表示するページ(URL)
   var subn = "sakura";   // サブウインドウの名称
   // 表示座標の計算
   var subx = ( screen.availWidth  - subw ) / 2;   // X座標
   var suby = ( screen.availHeight - subh ) / 2;   // Y座標
   // サブウインドウのオプション文字列を作る
   var SubWinOpt = "width=" + subw + ",height=" + subh + ",top=" + suby + ",left=" + subx";
   // サブウインドウを表示
   window.open(subp, subn, SubWinOpt);
}

上記のソースで望みに応じて書き換える必要があるのは、主に3～6行目です。それ以外はそのままコピーするだけで使えます。
上記で作成したShowSubWindow関数を、例えば以下のようなボタンで呼び出します。

<input type="button" value="画面中央にサブウインドウを表示" onclick="ShowSubWindow();">

実はこのソースだと微妙に中央には表示されないのですが、まあおおむね中央に表示されます。(詳しくは最後に解説)
これを表示させると、以下のように見えます。ボタンをクリックすると、360×240のサブウインドウが表示されます。

なお、サブウインドウを開くopenメソッドのオプションでは、top=の方にY座標を、left=の方にX座標を記述しないといけません。

• topは上端からの距離を示すので、X座標ではなくY座標を与えないといけません。
• leftは左端からの距離を示すので、Y座標ではなくX座標を与えないといけません。

この2つは、逆に指定してしまいがちな気がしますので、注意して下さい。

実はぴったり画面中央には配置されない

サブウインドウを表示するopenメソッドのオプションとして、先のソースでは以下の4つを指定しています。

• width ： 表示領域の横幅
• height ： 表示領域の高さ
• top ： ウインドウ左上の表示位置(画面上端からの距離：Y座標)
• left ： ウインドウ左上の表示位置(画面左端からの距離：X座標)

ここでポイントなのは、widthやheightで表す値は「サブウインドウのサイズ」ではなく「サブウインドウ内の描画領域のサイズ」だという点です。
ウインドウ枠やタイトルバー・ツールバー・ステータスバーなどのサイズは含んでいません。
なので、主に上下方向では完全に中央には配置されません。
たいてい、ウインドウ上側にツールバーなどが配置されるため、全体的にちょっと下寄りに表示されることが多いでしょう。

ウインドウそのもののサイズを指定できるouterWidth・outerHeightプロパティもあるんだけど

実は、openメソッドのオプションには、widthやheightの代わりに以下のような指定も使えます。

• outerWidth ： ウインドウの横幅
• outerHeight ： ウインドウの高さ

これを使えば、サブウインドウそのものの大きさを指定できるので、ぴったり画面中央に配置可能です。
では、なぜ使わなかったのか……というと、Internet Explorerなどの一部のブラウザでは、この指定方法に対応していないためです。
実際には、そんなにぴったり正確に画面中央に表示しなければならないケースってあまりないですよね？(^_^;)
だいたい中央あたりに見えればそれで良い、ということがほとんどではないかと思います。
なので、あまり細かい差は気にせずwidthとheightを使ってサブウインドウを作れば良いのではないかと思います。(^_^;)

※それ以前に、最近ではあまりサブウインドウを開くこと自体が避けられる傾向にありますけども。モーダルウインドウっぽいボックスを、同一ウインドウ内に描画する方法の方が使われる頻度が高そうですね。その話はまた別途。

(更新日：2017年06月13日)