SUPってなに?
SUPってなに?
2011.05.17

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

モモコ

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

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、設置も簡単なので是非機会があれば試してみる価値あり!だと思います。