相關引用：
案例說明：
js:
$(document).ready(function() {
$("#various1").fancybox({
'titlePosition': 'inside',
'transitionIn': 'none',
'transitionOut': 'none'
});
});
html:
<li><a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a></li>
<div style="display: none;"> //隱藏的元素必須在display：none里面
<div id="inline1" style="width:400px;height:100px;overflow:auto;">內容</div>
</div>
1,彈出框如何實現圓角？
要實現fancybox的圓角還需要另一個js插件，就是corner，可以到http://jquery.malsup.com/corner/ 下載，
<script type="text/javascript" src="http://malsup.github.com/jquery.corner.js"></script>
導入兩個插件后用下面的代碼即可以實現圓角。
$('a.iframe').fancybox({
'overlayShow' : true,
'showCloseButton':
'overlayColor' : "#000000", //要指定黑色背景，
'overlayOpacity' : 0.8, //
'onComplete' :
$('#fancybox-outer, #fancybox-content').corner('10px'); //利用corner實現圓角
}
});
2,如何關閉彈出的iframe
使用這個js即可 parent.$.fancybox.close();
需要注意的是，必須通過服務器請求才行，本地文件打開的方式關不掉。
3,如何不使用默認的關閉，自定義關閉
如何關閉彈出的層? $.fancybox.close(); 通用
4,如何在關閉彈出框的同時刷新頁面 返回消息等回調事件
$('a.iframe').fancybox({
//其它參數
'onClosed' : function() { window.location.href = 'index.aspx';},
'onStart':function() {return window.confirm('Continue?');},
'onCancel':function() {alert('Canceled!');},
'onComplete':function() { alert('Completed!');},
'onCleanup':function() {return window.confirm('Close?');}
});
5，彈窗播放優酷等視頻
導入fancybox的js css后
html:
<a class="video" href="your_swf_url" >
<img src="img_url" />
</a>
js:
$('.video')j.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'overlayOpacity' : options.overlayOpacity,
'hideOnOverlayClick': false
});
屬性說明：
| 屬性名 | 默認值 | 簡要說明 |
|---|---|---|
| padding | 10 | 瀏覽框內邊距，和css中的padding一個意思 |
| margin | 20 | 瀏覽框外邊距，和css中的margin一個意思 |
| opacity | false | 如果為true，則fancybox在動畫改變的時候透明度可以跟着改變 |
| modal | false | 如果為true，則'overlayShow' 會被設成 'true' ， 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 會被設成 'false' |
| cyclic | false | 如果為true，相冊會循環播放 |
| scrolling | 'auto' | 設置overflow的值來創建或隱藏滾動條，可以設置成 'auto', 'yes', or 'no' |
| width | 560 | 設置iframe和swf的寬度，如果 'autoDimensions'為 'false'，這也可以設置普通文本的寬度 |
| height | 340 | 設置iframe和swf的高度，如果 'autoDimensions'為 'false'，這也可以設置普通文本的高度 |
| autoScale | true | 如果為true，fancybox可以自適應瀏覽器窗口大小 |
| autoDimensions | true | 在內聯文本和ajax中，設置是否動態調整元素的尺寸，如果為true，請確保你已經為元素設置了尺寸大小 |
| centerOnScroll | false | 如果為true，當你滾動滾動條時，fancybox將會一直停留在瀏覽器中心 |
| ajax | { } | 和jquery的ajax調用選項一樣 注意: 'error' and 'success' 這兩個回調事件會被fancybox重寫 |
| swf | {wmode: 'transparent'} | swf的設置選項 |
| hideOnOverlayClick | true | 如果為true則點擊遮罩層關閉fancybox |
| hideOnContentClick | false | 如果為true則點擊播放內容關閉fancybox |
| overlayShow | true | 如果為true，則顯示遮罩層 |
| overlayOpacity | 0.3 | 遮罩層的透明度（范圍0-1） |
| overlayColor | '#666' | 遮罩層的背景顏色 |
| titleShow | true | 如果為true，則顯示標題 |
| titlePosition | 'outside' | 設置標題顯示的位置.可以設置成 'outside', 'inside' 或 'over' |
| titleFormat | null | 可以自定義標題的格式 |
| transitionIn, transitionOut | 'fade' | 設置動畫效果. 可以設置為 'elastic', 'fade' 或 'none' |
| speedIn, speedOut | 300 | fade 和 elastic 動畫切換的時間間隔, 以毫秒為單位 |
| changeSpeed | 300 | 切換時fancybox尺寸的變化時間間隔（即變化的速度），以毫秒為單位 |
| changeFade | 'fast' | 切換時內容淡入淡出的時間間隔（即變化的速度） |
| easingIn, easingOut | 'swing' | 為 elastic 動畫使用 Easing |
| showCloseButton | true | 如果為true，則顯示關閉按鈕 |
| showNavArrows | true | 如果為true，則顯示上一張下一張導航箭頭 |
| enableEscapeButton | true | 如果為true，則啟用ESC來關閉fancybox |
| onStart | null | 回調函數，加載內容是觸發 |
| onCancel | null | 回調函數，取消加載內容后觸發 |
| onComplete | null | 回調函數，加載內容完成后觸發 |
| onCleanup | null | 回調函數，關閉fancybox前觸發 |
| onClosed | null | 回調函數，關閉fancybox后觸發 |
方法說明：
$.fancybox.showActivity 顯示加載動畫
$.fancybox.hideActivity 隱藏加載動畫
$.fancybox.close 關閉窗口
$.fancybox.resize 自動調整窗口的高度使之與內容相適應
Centered 是否將選區居中，即顯示在容器的中心。
| $.fancybox.next | Displays the next gallery item |
| $.fancybox.prev | Displays the previous gallery item |
| $.fancybox.pos | Displays item by index from gallery |
| $.fancybox.cancel | Cancels loading content |
| $.fancybox.close | Hides FancyBox Within an iframe use - parent.$.fancybox.close(); |
| $.fancybox.resize | Auto-resizes FancyBox height to match height of content |
| $.fancybox.center | Centers FancyBox in viewport |