[jQuery] ThickBox 跨越 iframe 顯示完整的黑底

Standard

在做某個案子的時候,需要用到 ThickBox 的效果來顯示預覽的內容,但因原設計者採用了 iframe 來展示各單元內容頁的架構,造成點擊內嵌頁框內的項目,跳出的 ThickBox 效果僅有 iframe 內有黑底而已。所幸在網上找到了解法:

thickbox.js 檔案中,init 前面改一下:

if (a.indexOf('TB_iniframe') !== -1) {
  window.top.tb_show(t, a, g);
} else {
  tb_show(t, a, g);
}

原來呼叫 ThickBox 效果的連結呢,加上:

&TB_iniframe=true

外部的母頁面也要加入:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" />

如此就不會侷限在 iframe 內才有黑底了。

12 thoughts on “[jQuery] ThickBox 跨越 iframe 顯示完整的黑底

    • patw

      colorbox, fancybox 我都覺得還漂亮的燈箱效果, 也許你可以試試看行不行 ~

      關於 lightbox & iframe 的問題許久以前我在 google 找過, 似乎是沒有發現比較好的做法, 才轉用其他套燈箱的.

    • patw

      用法請見他官網喔 ~ 有提供範例

      如果你是卡在 iframe 黑底問題,他也已經提供解法了,在網頁最下方的這個標題
      「Opening ColorBox in the parent of an iframed document」

  1. 哈 我又來了

    想在請問一下,我最後還是改回thickbox,
    因為colorbox我看了官網說明其實不曉得他到底要怎麼跨越iframe

    Opening ColorBox in the parent of an iframed document

    Anything loaded within an iframe is going to be confined to that iframe. The only way not to be confined by the iframe is to move ColorBox to the parent document. From the iframe you can reach back to the parent document to call ColorBox.

    Example:
    Open from parent

    看不太懂他這個要放哪裡…

    阿還有一個問題就是,我使用了thickbox之後發現
    火狐的話畫面會整個跑掉(不能居中)ie可以,
    後來有測試是載入css的問題,但是還不曉得怎麼改….

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *