JQuery 彈跳視窗 - FancyBox

使用FancyBox 2.1.5元件. 官網：http://fancyapps.com/fancybox/

by Shang-De You

HTML

<!--jquery元件-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--FancyBox元件-->
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript"  src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


<!--使用display:none隱藏facybox的連結-->
<a id="autoclick" style="display:none" class="iframe"  href="http://www.csmu.edu.tw/ezfiles/0/1000/img/1735/270167841.htm"> </a>
    
<!--點擊跳出視窗-->	
<li><a class="iframe" href="http://www.csmu.edu.tw/ezfiles/0/1000/img/1735/270167841.htm">彈出視窗</a></li>

JavaScript

// 彈跳視窗設定
        $(document).ready(function () {
                                    
            $('.iframe').fancybox({
                'width': 600,
                'height': 300,
                'autoScale': false,
                'type': 'iframe',
                'onClosed': function () { }  //關閉子視窗後的動作
            });

        });

        // 一進到網頁即自動 click 觸發id=autoclick
        $(document).ready(function ()
        { $("#autoclick").trigger('click'); });