リンクをクリックした時に、指定したサイズの別ウインドウが開くようにする方法をご紹介いたします。JavaScriptを使いますが、知識も必要なく非常に簡単に実装することができます。
以下にデモを用意したので、動きについてはデモをご確認ください。
スポンサードリンク
指定したサイズのポップアップウインドウを開く方法
ポップアップウインドウを開くためには、window.open()を使います。window.open()は別ウインドウを生成するためのメソッドです。
ポップアップウインドウを開くためのリンクを以下のように変更しましょう。
<a href="別ウィンドウで開くURL" onclick="window.open('別ウィンドウで開くURL', '別ウィンドウのタイトル', 'width=400,height=400'); return false;">別ウィンドウ</a>
たったのこれだけです。例えば、another.htmlというページを400*400で開きたい時は、以下のように記述します。
<a href="another.html" onclick="window.open('another.html', '別ウィンドウ', 'width=400,height=400'); return false;">クリックすると別ウインドウが開きます</a>
「クリックすると別ウインドウが開きます」というリンクをクリックすると、another.htmlがポップアップで表示されるようになります。
あとがき
ポップアップウインドウを開く方法は他にも色々とありますが、上述した方法が最も簡単だと思います。ポップアップでページを表示させたい時は、ぜひ参考にしてください。