iboxを調べてみたよ。

下記事にもあるように早速iboxを調べてみました。
使い方は下記のようになります。

1.ibox.js及びibox.cssを定義する。

<script type="text/javascript" src="js/ibox.js"></script>
<link rel="stylesheet" href="ibox.css" type="text/css"  media="screen"/>

2.既存のHTMLをオーバレイする。

<a href="xxx.html" rel="ibox&height=300&width=450">リンク文字列</a>

href属性はオーバレイしたHTMLを定義。rel属性はibox&後ののheightとwidthでオーバレイするウィンドウの大きさを定義します。

3.内部要素をオーバレイする。

同一HTML内の下記のコードをオーバレイした場合は

<div id="inner_content" style="display:none;">
<div style="background:#000000;color:#ffffff;border:1px dashed #FFFFFF;padding:15px;margin:15px;">	
	<h2>It is a hidden div!</h2>
	<p>If you were to view source, you would find a div called 'inner_content'. This is that div. We have used CSS to set its display property to none, but using <a href="/blog/p_ibox.html">iBox</a>, you can clearly see it as an overlay. Hurrah!</p>
	<p>It is even styled. Oh so pretty it is</p>

</div>
</div>

下記のように書くと

<a href="#inner_content" rel="ibox&height=400" title="Loading Internal HTML Content" >View the content of the div [inner_content] in iBox by clicking here</a>

オーバレイされます。つまりid属性でマッピングしてるわけですね。

4.注意点

私自身、3時間くらいはまっていたのですが、ibox.cssのほかに外部CSSを定義すると上手くオーバレイされません

<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/ibox.css" type="text/css"  media="screen"/>

上記のように記述していると上手くオーバレイされません。順番を入れ替えると上手くいきますが

<link rel="stylesheet" href="css/ibox.css" type="text/css"  media="screen"/>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">

これだとbase.cssがまったく効かなくなります。そこで、base.cssに

@import "ibox.css";

とするとbase.cssの効果を効かせたまま、オーバレイを実現することができます。

5.未だに上手くいっていないこと。

外部HTMLを日本語(というかマルチバイト?)で記述して、オーバレイさせようとすると、文字化けします。現在絶賛ハマリ中。
このサイトを読んでいる方は非常に少ないとは思いますが、解決策をご存知の方はご教示下さい。
(追記)http://jquery.com/demo/thickbox/を試してみる
解決した。外部ファイルをUTF-8で保存すれば日本語が使用可能。