Onclickを用いないポップアップJS

Wednesday, Jul 26, 2006 - 01:07 +09:00

単純なモノほど、奥が深い。一般的にポップアップ・ウィンドウは、

<a href="#" onclick="winOpen('./popup.html')">

...みたいな感じで起動するんですが、ふと思いたってonclickの代わりにclassでポップアップさせるよう改造してみました。これでどうなるかって言うと、

<a href="./popup.html" class="popup">

...みたいな感じで、まんま普通のHTMLになります ...とりあえず、こんな感じ。

サンプル

HTML
<a href="aaa.com" class="popup">ポップアップ</a>
Javacript
window.onload=autoPOP;

function autoPOP()
{
	var x = document.getElementsByTagName('a');
	for (var i=0;i<x.length;i++)
	{
		if (x[i].getAttribute('className') == 'popup' || x[i].getAttribute('class') == 'popup')
		{
			x[i].onclick = function () {
			return winOpen(this.href)
			}
			x[i].title += '(Popup)';
		}
	}
};

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

	return false;
};

感想

なんとなく作ってみたけど、なんかいろいろ応用が効きそうです。winOpen()だけでも使えるし。getAttribute()でページ内を走査する部分とか、onloadイベントにする部分とか、onclickイベントを付与する部分とか。

これが一番興味深いんだけど... トリガをclassにしたことで、対象へのピンポイントなCSS指定が可能となる。この場合だと、たとえば<a>によるリンクの中でもポップアップ・リンクだけにそれと判るアイコンを付けたりとか。

posted in Javascript Trackback (0)

Trackback

このエントリーのトラックバックURL
http://rospear.info/other/mt-tb.cgi/200

« Previous Entry - Next Entry »