【JavaScript】ウィンドウをタブではなく、ポップアップで開くには

こんにちは、たびとです。

ポップアップした画面に表示した画像のサムネイルをクリックすると、オリジナルの画像をポップアップするような動作をしたいのですが、ポップアップする元の画面のタブに表示されてしまう現象が起きました。

そのポップアップ元の画面は、ポップアップした画面の下に隠れてしまうため、サムネイル画像をクリックしても画面の下に隠れて、押したかどうかの判断に、いちいち画面を移動して確認する必要があります。

このような操作では使い勝手が悪くて、使い物になりません。なぜ、このようなことが起きるのか原因を突き止めてみました。

この記事の対象者

JavaScript でポップアップ画面を使う必要性のある方
JavaScript の window.open() メソッドの挙動を知りたい方
Chrome・Edge・Firefox・Safari でポップアップする方法を知りたい方

JavaScript の window.open()

JavaScript で別のウィンドウを開くには、window.open() メソッドを使います。引数は、3つ指定することが可能ですが、URL 以外は省略可能です。

let obj = window.open(url, [name, [options]]);

ポップアップする場合、各引数は以下を指定します。

No.	引数	説明
1.	url	ポップアップ対象のURLを指定します
2.	name	'_blank' または '' を指定します
3.	options	何も指定しないとタブで開くため、適当な値を指定します。

第3引数に指定できるオプションは以下の通りです。複数指定する場合、コロン(,) で連結します。

オプション	説明
left/top=数値	ウィンドウの左上の座標
width/height=数値	ウィンドウのサイズ
menubar=yes/no	ブラウザのメニューの表示/非表示
toolbar=yes/no	ブラウザのナビゲーションの表示/非表示
location=yes/no	URLフィールドの表示/非表示
status=yes/no	ステータスバーの表示/非表示
resizable=yes/no	リサイズの有効/無効（非推奨）
scrollbars=yes/no	スクロールバーの有効/無効（非推奨）

ただし、オプションによってはブラウザに無視されるため、挙動を確認するようにしてください。

サンプル

メインの HTML にボタンを配置し、ボタンをクリックすると、画像のサムネイルをポップアップする HTML を作ります。画像のサムネイルをクリックすると、オリジナルの画像をポップアップするようにします。

ファイル名	説明
main.html	ボタンを押すとサムネイル画面を window.open() する
popup.html	sample.png をサムネイル表示し、クリックすると window.open() する
sample.png	サムネイル・オリジナル表示に使う適当な画像ファイル

これらのファイルを同一のディレクトリ配下に配置します。

main.html

最初にブラウザで表示する HTML です。ボタンをクリックすると、popup.html を開くだけです。

popup.html

main.html からポップアップで開きます。画像をサムネイルで表示し、クリックすると大きな画像をポップアップして開きます。

sample.png

popup.html のサムネイルをクリックして開いた画像です。手元にあった適当な画像を使っています。

ソースコード

main.html のソースコードを掲載します。

<!DOCTYPE html>
<html lang="ja"
<head>
    <meta charset="utf-8">
    <title>ポップアップ</title>
    <style>
        .button {
            margin: 100px;
            border: 1px solid;
            background: lightgray;
            width: 200px;
            padding: 16px 0;
            text-align: center;
        }
        .button:hover {
            opacity: 0.64;
        }
    </style>
</head>
<body>
    <div class="button" onclick="window.open('popup.html', '_blank', 'menubar=no');" >
        ポップアップ        
    </div>
</body>
</html>

popup.html のソースコードを掲載します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ポップアップ画像</title>    
</head>
<body>
    <p style="margin: 100px;">
    <img src="sample.png" onclick="window.open('sample.png', '_blank', 'menubar=no');" 
        style="width: 100px;" />
    画像をクリックすると拡大します。
    </p>
</body>
</html>