thickbox使用问题及处理办法

第一次接触thickbox的时候感觉就被标签参数弄糊涂了，不过看了源代码后，自己在使用的过程中也还是学到了一点东西，在这这里

给初‘用’thickbox的朋友们一个小帮忙。还请高手多多指点。

一、首先说下参数

a类型： <a href="#TB_inline?width=344&inlineId=mydiv&modal=true" class="thickbox">显示</a>
input类型： <input class="thickbox" alt="#TB_inline?width=285&height=392&inlineId=MyDiv&modal=true"

onclick=" GetData('<%# Eval("STID") %>')" type="button" value="修改"/>

 

1、在使用thick的时候，参数中的TB_iframe说明灰色中间弹出的thickbox是通过加载另外一个文件来导入的

2、参数中的#TB_inline和inlineId=divname说明灰色中间弹出的thickbox是通过加载当前文件的一个div或则其他元素来的

3、#TB_inline和inlineId=divname这两个标签的要同时存在的，因为在thickbox.js库中是首先判断参数中是否存在TB_inline后接着

来获取标签inlineId的值的，若参数中没有标签TB_inline就不会判断inlineId的值的了

4、而参数中的标签"TB_iframe”和“#TB_inline与inlineId=divname”这两种情况是对立的，只能出现一种情况，因为thickbox要嘛是

通过加载外部文件，要嘛就是加载当前页面的某个元素,如div元素，而参数中的width和height是用来判断thickbox的大小的

二、使用中碰到的一些问题

1、在说说在使用iframe子页面中使用thickbox，然后父页面调用iframe子页面的一个错误问题。

 

一开始在网上找到了一些解决办法来让thickbox在父页面中也是全屏显示的问题，顺便再这里也在说明下，方法如下：

将

tb_show(t,a,g); 改成

window.parent.tb_show(t,a,g);

然后在父页面和iframe子页面中都要写上几个js文件的引用，切忌：

他们是thickbox.css、jquery.js、thickbox.js
这三个文件一定要在两个页面中都要以后用

 

2、然后在这里可能还会遇到一个问题。在使用加载当前页面的时候，即在参数中有标签：、#TB_inline和inlineId=divname。thickbox虽然是在父页面中全屏显示了，但是在父页面查看的时候thickbox的加载页面中看不到数据，调试后发现$('#' + params['inlineId'])为空对象，但是在iframe子页面查看的时候是看得到数据的，一个解决办法是：把thickbox.js中的

$('#' + params['inlineId'])改成

window.frames["myiframe"].$('#' + params['inlineId'])。

 

3、在ie6、ie7、ie8中都要正常显示的代码是：

把一开始的function tb_position()函数全部替换成如下：

function isIE6()
{
return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 6.0")=="-1"?false:true;
}

function tb_position() {
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
if(isIE6())
{
if ( !(jQuery.browser.msie && jQuery.browser.version < 7))
{ // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
}
else
{
if (jQuery.browser.msie)
{ // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
}
}

这样在ie6、7、8中都显示正常了。

4、但是在ie6中会有个小问题就是隐藏了滚动条。

解决方法如下：

找到下面这两行代码，把它们屏蔽了

$("body","html").css({height: "100%", width: "100%"});
$("html").css("overflow","hidden");

ok，接下来貌似所有关于thickbox的所有的问题都解决了，哈