ポップアップウインドウをOnclickでなくclassで開く

ポップアップウインドウって、最近じゃ廃れてきていると思いますが、必要に応じて使いこなす必要があるわけです。

基本的にポップアップウインドウは、

<a href="javascript:void(0);" onclick="winOpen('popup.html')">ポップアップ</a>

というかたちでポップアップさせることが多いと思います。
もしくは、javascript:void(0);の部分が#になったかたちなど。

しかし、このかたちでポップアップさせると、テキストリンク先が『javascript:void(0);』もしくは『#』になってしまいます。これではせっかくのテキストリンクがもったいない。

外部JSで、名前は何でもいいんですが、とりあえず、popup.js で。

window.onload = function() {
	var node_a = document.getElementsByTagName('a');
		for (var i in node_a) {
			if (node_a[i].className == 'popup') {
				node_a[i].onclick = function() {
					return winOpen(this.href)
				};
			}
		}
};
function winOpen(url) {
	window.open(
	url,'popup',
	'width=500,height=300,scrollbars=1,resizable=1');
	return false;
};

function winOpen(url) の部分で、ポップアップウインドウのサイズやスクロールバーの有無を指定しています。

この popup.js をページ head 内に読み込みます。

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

ポップアップしたいリンクを普通にリンクした後、class=”popup” を追加します。

<a href="popup.html" class="popup">ポップアップ</a>

完成。

問題点としては、各ポップアップウインドウ毎にサイズやスクロールバーの有無を個別指定できないことです。
上の指定だと、『横幅500px、縦幅300px、スクロール有、リサイズ有』という指定で統一です。
これをうまいこと、個別指定できるようになればカンペキだと思うんですけどね。