jqueryベースで動作する「ColorBox」。
主に画像を拡大表示するときなどに使いますが、iframeを開きたいときにも使うことができます。

使い方は簡単。

1.ソース中のポップアップさせたい部分に
class="iframe"

を記述し、js,cssファイルを読み込みます。

（例）
<a href="/job_search.php" class="iframe"><img width="29" height="168" alt="test" src="/images/common/direct_btn.png"></a>

ColorBoxからダウンロードしたjsファイルとcssの読み込み。

<script type="text/javascript">google.load("jquery", "1.7.1");</script>
<script type="text/javascript" src="/js/jquery.colorbox.js"></script>
<link rel="stylesheet" href="/css/colorbox.css" />

2.画像ファイルの設置
ダウンロードしたcolorboxの画像ファイルを設置(/images/以下のファイル)。

3.colorboxの設定をjavascriptで記述。
iframeの大きさは、widthとheightを変更することで変えることができます。
ピクセル指定も可能です。

$(document).ready(function(){
$(".iframe").colorbox({width:"850px", height:"80%", iframe:true});
});

※開いたウインドウに閉じるボタンを設置するときは、ボタンに

id="cancel"

を設定して、

$("#cancel").click(function(){
parent.$.fn.colorbox.close(); return false;
});

を記述します。