モーダルウィンドウを実装するjsスクリプト「TinyBox2」は軽量かつ高機能、カスタマイズも容易でナイスワン＠JavaScriptプラグイン
モーダルウィンドウ内で別ページ（サイト内の別のhtmlや外部サイト）を表示させ、なおかつ表示位置も指定させる必要があったので、調べてやってみました。
- モーダルウィンドウ（背景の色、不透明度もカスタマイズ可能）
- モーダルウィンドウのデザインもカスタマイズ可能
- モーダルウィンドウの表示位置を指定可能
- クリックイベントではなくマウスオーバーイベントで実行
上記の各点を満たして最短で（急な依頼だったので）デモを作れることが目的。
たぶんjQueryのプラグイン「fancybox」や「thickbox」でも可能なんじゃないかと思いますが表示位置のカスタマイズが思ったほどすぐには出来なかったので、それは早々にあきらめて別のものを探しました。
コリスさんの記事で「お、これは！」というのを見つけて、早速テスト。
スクリプトのダウンロードは以下から。
JavaScript Modal Windows - TinyBox2- Scriptiny.com
ダウンロードするとデモが入っているので（index.html）動きや機能を確認して
iFrame, Blue Mask, Absolute Position, Frameless, Close Callback
とある部分を使いました。
<li onclick="TINY.box.show({iframe:'http://www.scriptiny.com/', boxid:'frameless', width:750, height:450, fixed:false, maskid:'bluemask', maskopacity:40, closejs:function(){closeJS()}})"> iFrame, Blue Mask, Absolute Position, Frameless, Close Callback </li>
目当てのものにすぐ使えそうなのはこの部分で、コードを見ればわかるように各オプションがすでに記述されています。
iframeの部分で表示するファイルを指定、widthとheightでウィンドウサイズを指定、maskidはモーダルウィンドウの背景をマスクする色（CSSで設定変更可能）、maskopacityで同背景の不透明度を指定と、これらを適当に指定すればほぼ目的の結果が得られます。
最後に、表示位置の指定がこのコード内にはないのでデモの別の部分を確認。単純にカンマで繋いでオプションとして「top:5」とすればtopから5pxの位置（水平方向はセンタリング）になるようです。この場合モーダルウィンドウのてっぺんは左上にある丸いクローズボタンなことに注意。
また、イベントハンドラをデモにある「onclick」から「onMouseOver」に変更すればマウスオーバーで実行されます。
iframeで読み込むページでX-Frame-Optionsの値がDENYやSAMEORIGINだったりすると読み込めなかったりするので注意。
コリスさんの記事にも「TinyBox2の特徴」として紹介されていますが、他のスクリプトに依存しない（たとえばjQuery本体があってプラグインということではない）単体のスクリプトであること。軽量（5KB）であること。iFrameやAJAX、画像もウィンドウ内で表示できること。マスクの不透明度、色、ウィンドウのサイズ、ウィンドウの位置等、さまざまなオプションが利用できるのが大変便利だなと思いました。
モダンブラウザだけでなく、IE7にも対応してます。
グレイトだなぁ〜
