使用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的所有的问题都解决了,哈


转载自:http://blog.csdn.net/bin_520_yan/article/details/5571311

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页