jQueryでポップアップ(小窓)を設定する

ポップアップウィンドウを利用する時は、リンクタグに直接javascriptを書くのが多いが、jQueryでそれを設定する方法をメモ。

<a href="http://inoma-design.hatenablog.com/" class="popup">click</a>

$(function(){

	var
	w       = 770,
	h       = 600,
	l       = (screen.availWidth - w) / 2,
	t       = (screen.availHeight - h) / 2,
	popPage = '.popup';

	$(popPage).on('click',function(event){
		window.open(this.href,"window","width= "+ w + ",height=" + h + ",left=" + l + ",top=" + t + ", scrollbars = yes, location = no, toolbar = no, menubar = no, status = no");
		 return false;
	});

});

htmlでの方でリンクに任意のクラスをつける。例ではpopup。
jQueryの方でそのクラスをクリックした時、window.open()が動くように指定。

window.open( URL, ウィンドウ名 [,オプション] )

URLはthis.hrefでセレクタのURLを取得。
ウィンドウ名はこれといって設定せずにnullでもいいみたい。
オプションでは幅、高さ、位置などを設定。
＊firefoxでは、scrollbarsをyesにしないと固定されたままになってしまうので注意

オプション一覧

width	数値	ウィンドウ幅
height	数値	ウィンドウ高さ
left	数値	ウィンドウ位置左
top	数値	ウィンドウ位置上
menubar	yes/no	メニューバー有無
toolbar	yes/no	ツールバー有無
location	yes/no	アドレスバー有無
status	yes/no	ステータスバー有無
resizable	yes/no	リサイズ可否
scrollbars	yes/no	スクロールバー有無

See the Pen window.open jQuery by inoma (@inoma) on CodePen.