之前曾寫過一篇「[jQuery] ThickBox 跨越 iframe 顯示完整的黑底」，最近回去看了一下 thickbox 的網站，它也宣告停止繼續維護了。
它建議可改用的清單中，有個也滿好看的燈箱效果 ColorBox，最近有網友問到 ColorBox 可否也能做到跨越 iframe 顯示完整的黑底(overlay)呢？經實際測試是可以的，作法如下。
首先準備兩個檔案，index.html 首頁（嵌入 iframe）與 iframe 的內容 iframe.html 兩個檔案。
index.html 中，除引入所需的 jquery 與 colorbox 的 js, css 檔外，還要準備一個 iframe 內嵌框。
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
※路徑請依實際狀況變更。
iframe 內嵌框：
<iframe src="iframe.html" width="500" height="500"></iframe>
接著，來寫 iframe.html 的內容。
其同樣需引入所需的 js/css 檔，請參照上面囉。
再來寫一段請父視窗開啟連結(link)於 colorbox 的 JavaScript：
function OpenLink(link) {
parent.$.colorbox({ href: link, iframe: true, width: "50%", height: "50%" });
}
接著就可使用此方法開啟連結，本例為開啟 Google：
<a href='http://www.google.com' onclick="javascript:OpenLink('http://www.google.com'); return false;">Open from parent</a>
測試於 IE7/IE8/Firefox 皆正常。
哦耶 太棒囉
謝謝版主哦
不過我還有個問題…圖片的話也是用此方式下去套用就好嗎??
圖片套用成功…但是好像就不能用圖片群組了??
是啊 官網有說喔：
如果網站是做上下欄 top 和 main 的話
若在main裡做圖片燈箱效果
黑底也可覆蓋到top嗎?
有點看不太懂iframe的作法
不好意思麻煩版主解惑
謝謝
你是說 frameset 嗎? 感覺不行 …
最近沒空幫你試 😛
想請問一下，版主您給的檔案中，html 檔案都一定要放在 example1 資料夾中才能運作，如果想放到資料夾外的話應該要如何作呢？另外，我看跨越 iframe 彈出的 colorbox 是固定大小，如果是放圖片，然後希望 colorbox 能自動服和圖片大小，這樣有辦法嗎？感謝版主耐心回答
可以將 example1 資料夾中的檔案移出 example1 外呀, 但請注意原始碼中的相對路徑也要做相應的修改喔, 例如原先都是寫 ../colorbox/jquery.colorbox.js, 若移出資料夾外, 就不需 ../ 了。
第二個問題, 那麼請不要設 iframe: true 以及寬高, colorbox 便會自動依照圖片大小顯示。
最後建議您可以去 colorbox 的官網 閱讀說明文件, 應該會對 colorbox 的相關用法比較了解喔。
感謝版主的回答，上面兩項都成功了，不過我試了老半天還是用不出我所想的效果。
我的情況如下：
我的 a.html 上有一個 iframe，然後用一個按鈕呼叫 b.html 的內容顯示在 iframe 裡，我希望的做法是開啟 a.html 的時候，按 iframe 中 b.html 上的小圖，然後跨越 iframe 顯示完整的大圖，但是我目前跳出的 colorbox 都限制在 iframe 內，想請問版主這類情況該如何處理? 附上抓圖：http://ppt.cc/PL8g
如果版主沒有空的話也沒關係，感謝您耐心看完，感謝!
http://patw.idv.tw/files/colorbox_fox.rar
大概是這個意思吧? 用原本的範例改的 ~
感謝此篇作者大大 ！！其中一行程式碼, 解決煩惱好幾天的問題！！！
謝謝你的文章。
另外請較，COLORBOX 跨越 IFRAME後，可以使用例如parent.frames[0].functionName()，或是parent.framesName.functionName()的方式呼叫原視窗(|頁框)的函數，可是這樣都要事先知道頁框名稱或是頁框id….。
colorbox能否有其他方式，不須指定，就能呼叫原本父頁框裡的js function()呢?謝謝。
ps:parent.functionName()沒用，因為是COLORBOX 跨越 IFRAME
所以是指父頁面有多個 iframe，然後希望可以在各 iframe 裡面的連結開啟 colorbox，又在各自 colorbox 裡面呼叫源頭的 iframe 頁中的 function，且又希望能夠以不指名序號或名稱的方式呼叫….嗎？
不是很清楚你的情境，我先照上面的情境做了個 demo，未細測，不知道是不是你要的？
http://plnkr.co/edit/uHI2kY?p=info
真是太感謝你了，竟然還提供完整範例效果，謝謝。