Thickbox 使用筆記

基本引用

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

啟動連結

<a href="Tree3Status/ParamSel.aspx?keepThis=true&TB_iframe=true&height=450&width=770" 
   title="選擇科目" class="thickbox"></a>

參數說明：TB_iframe=true 以 iframe 載入、height/width 控制尺寸、可自行附加查詢字串傳參。

自訂遮罩透明度

.TB_overlayBG {
    background-color:#000;
    filter:alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
}

關閉彈層

onclick="self.parent.tb_remove();"

關閉並重新整理父頁面

1. 修改 thickbox.js 新增：

function refreshOpener() {
    var win = top.window;
    try { if(win) win.location.reload(); } catch(ex) {}
}
function refreshOpenerAndCloseMe() {
    tb_remove();
    refreshOpener();
}

2. 將 $("#TB_closeWindowButton").click(tb_remove); 改為 click(refreshOpenerAndCloseMe);

此後點擊關閉鈕即關閉 Thickbox 並重新整理父視窗。