[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 顯示完整的黑底

  1. 是哦…因為考慮到光箱的質感
    還是版主有別套方案呢?

    最近正在為這苦惱呢
    網路找遍哈

    可否留個msn討論一下 謝謝!!

  2. patw

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

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

  3. 哦哦 好
    我試試看他們能不能跳脫iframe

    因為我昨天有照你方法用thickbox使用
    是可以跳脫的,可是我覺得它的效果比較不好看

    謝囉 我現在去用看看

  4. patw

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

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

  5. 哈 我又來了

    想在請問一下,我最後還是改回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的問題,但是還不曉得怎麼改….

  6. patw

    我試沒有這個問題耶
    ie / firefox / chrome 都正常的顯示在中間, 檔案都取自 thickbox 官網.

    colorbox 等我有空再測 :p

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *