class名を入れるだけでポップアップの実装ができる「popup.js」

※編集部注

この記事で紹介しているpopup.jsは既にサービスを終了しております。webサイト制作に関するその他の記事は、こちらからご覧ください。（記事一覧へ飛びます。）

最近携わった案件にて、新しいウィンドウをポップアップで表示する仕様がありました。
グーグル先生を質問攻めにしながら手打ちで格闘してみましたが、IEとChromeという壁に阻まれ敢えなく断念…。
そんな時にとっても便利な【popup.js】を発見したのでご紹介します。

使い方は至って簡単。
まずJSを上記参考サイト様からダウンロードします。

その中で呼び出す新規ウィンドウの横幅・縦幅、スクロールバーの有無、ウインドウサイズ変更の有無を該当部分を書き換えて設定。

function winOpen(url) {
	window.open(
		url,
		'popup',
		'width=500,height=350,scrollbars=0,resizable=1'
	);

	return false;
};

そしてheaderの中でJSとJqueryを呼び出します。

<script type="text/javascript" src="popup.js"></script>
<script type="text/javascript" src="jquery.js"></script>

使用する時はリンクにclass=”popup”を追加するだけでポップアップしてくれるようになります！

<a href="example.com" class="popup">popup windowを開く</a>

つい時間が掛かってしまいそうな一手間を解消してくれるJS、設置も簡単なので是非機会があれば試してみる価値あり！だと思います。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。