【jQuery】jQueryの「fancybox」を使ってlightbox風の小窓を出す方法

lightbox風なポップアップを出したい時は「fancybox」がおすすめです。
今回は「fancybox」を使ったポップアップを出す方法を紹介します。
　
　

　
　

<!-- HTML。Aタグのクラス名は下で使用します -->
<a href="xxxxx" class="popup">小窓を開く</a>

<!-- </body>直前に呼び出し。jqueryのバージョンは1.9以降だと正しく動作しない -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this->webroot ?>js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="<?php echo $this->webroot ?>js/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="<?php echo $this->webroot ?>js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

<script>
// ポップアップ設定
$(function() {
    $('.popup').fancybox({
        'autoScale'          : true,
        'enableEscapeButton' : false,
        'showCloseButton'    : true,
        'hideOnOverlayClick' : false,
        'scrolling'          : 'yes',
        'type'               : 'iframe',
        'autoDimensions'     : false,
        'width'              : 800,
        'height'             : 500,
        'onClosed'           : function()
        {
            // 閉じた後の動作。この場合画面をリロード
            location.reload();
        }
    });
});
</script>

これでリンクをクリックすると、リンク先のページがポップアップ内に表示されます。
　
　
小窓内に閉じるボタンを設置する際は、小窓内でも同じようにjsを呼び出すことで
parent.$.fancybox.close();　が使えるようになります。
　

<button type="button" onclick="parent.$.fancybox.close();">閉じる</button>