strict な XHTML のままポップアップを実現する

HTML&CSS

2008.06.02

イメージ

XHTML 1.0 strict では、targetを_blankに設定すると構文エラーとなります。
そこで jquery を使って XHTML はスマートな記述にして、ポップアップを実現します。

XHTMLのソースコード

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

<ul>
<li><a href="/">トップページ</a></li>
<li><a href="/company/">会社概要</a></li>
<li><a href="/blog/">ブログ</a></li>
<li><a href="/help/">ヘルプ</a></li>
</ul>

jquery.js とポップアップ用の popup.js をインクルードします。
ヘルプだけポップアップを実現します。href の設定がキモとなります。

popup.js のソースコード

$(function() {

	$('a[@href~="/help/"]').click(function(){
		window.open(this.href, "help","width=700,height=500");
		return false;
	});
});

a の href 属性をキーとして、「/help/」が含まれていたら、ポップアップ。
これならXHTML は strict のまま。
javascript が有効でない場合は、そのままページ遷移します。

これ、かなり使えます。