fancyBox

效果

用法1
用法2

js

<!-- Add jQuery library --><!-- 若原先網頁已經有此程式則不必再次引入 -->
<script type="text/javascript" src="http://js.mobi.net.tw/jquery-1.10.1.min.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="http://js.mobi.net.tw/fancyBox215/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="http://js.mobi.net.tw/fancyBox215/jquery.fancybox.css?v=2.1.5" media="screen" />



<!-- 啟用 -->
<script type="text/javascript">
$(function() {
	$('.fancybox').fancybox({
		'autoDimensions' : false,
		'width'          : 650,//開啟的視窗寬度
		'height'         : 500,//開啟的視窗高度
		//'frameWidth'   : 530,
		//'frameHeight'  : 1380,
		'transitionIn'   : 'fade',
		'transitionOut'  : 'none',
		fitToView  : false,
		autoSize   : false,
        padding: '0',
        helpers: {
            overlay: {
            locked: false //避免超連結開啟時跳回上方
        }
        }
	});
});
</script>


HTML

<a class="fancybox fancybox.iframe" href="iframe.html">Iframe</a>


說明:

  • href放要被載入的網址
  • HTML(在新開視窗的網頁中)

    <a href="javascript:;" onclick="parent.jQuery.fancybox.close();">關閉Close</a>
    或是
    <a href="javascript:;" onclick="parent.$.fn.fancybox.close();">關閉Close</a>
    
    

    檢視下一個範例index2.html

    下載完整檔案(備用)
    Arter 2014/5/12