`
ghyghoo8
  • 浏览: 192785 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

关于thickbox的一些问题解决

    博客分类:
  • js
阅读更多
恶心的thickbox不更新了,遗留了一大堆兼容问题。于是,在项目中就遇到了。

1.有时候,点击class="thickbox'的a标签,弹出的thickbox会出现两个iframe,于是,较好的解决方法是用span代替a标签,然后加入点击方法 tb_show(title,url) 这样并解决了。据说a标签有许多弊病,IE6中貌似更多(其中之一:先判断的href,再判断是否有click事件)。

2.定位问题,IE中恶心的定位,直接定位到下面。那是因为js开头的那个判断只是判断是否是IE6,其实IE中都会出现定位便宜的问题,于是修改后:
//on page load call tb_init
jQuery.browser.msie6 = 
        jQuery.browser.msie 
        && /MSIE 6\.0/i.test(window.navigator.userAgent) 
        && !/MSIE 7\.0/i.test(window.navigator.userAgent)
         && !/MSIE 8\.0/i.test(window.navigator.userAgent);

和后面的代码
function tb_position() {
jQuery("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
	if ( !(jQuery.browser.msie6)) { // take away IE6
		jQuery("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
		
	}
}


3.url传值问题:一般,你如果链接到一个url到action,并在后面加了param,是传不过去后面的参数的,js里面把参数提取并过滤掉了。需要修改,不让它去掉?后面的参数。
4.还有其他诸如浏览图片时,设置最小宽高,加入拖动功能等。。。。(暂未有需求改之)


//发现:IE6下,如果页面要有左右滚动条的话,阴影无法覆盖全部
解决:thickbox.css中
* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
     width: expression(document.body.scrollWidth > document.body.offsetWidth ? document.body.scrollWidth : document.body.offsetWidth + 'px');
}



恶心的IE6:再次发现。当有左右滚动条时,thickbox弹出位置偏离。于是小改代码,如下
//针对IE6的修改===================================
if (window.ActiveXObject&&!window.XMLHttpRequest) {
var scLeft; 
var swidth; 
        if (typeof window.pageXOffset != 'undefined') {
            scLeft = window.pageYOffset;          }
        else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
            scLeft = document.documentElement.scrollLeft;  }
        else if (typeof document.body != 'undefined') {
            scLeft = document.body.scrollLeft;   }

if(TB_WIDTH-scLeft>0){swidth= '-' + parseInt(( TB_WIDTH/2))}else{swidth='+' +(scLeft+TB_WIDTH/2)/2}
jQuery("#TB_window").css({marginLeft: swidth + 'px', width: TB_WIDTH + 'px'});
	}




附上我改的js
分享到:
评论

相关推荐

    ThickBox 3_1

    - `tb-ie.js`(可能包含):用于解决旧版Internet Explorer的兼容性问题。 - 图片资源文件:如`loadingAnimation.gif`、`close.gif`等,用于显示加载和关闭图标。 在HTML链接或元素上添加特定的类名(如`thickbox`...

    juery thickbox3例子

    Thickbox3则是jQuery的一个插件,扩展了其功能,提供了丰富的弹出窗口解决方案。 在压缩包文件名称列表中,我们只看到了“thickbox3.1”。这可能表示这个压缩包包含了Thickbox3的源代码、CSS样式文件、JavaScript...

    thickbox3.1.zip

    总的来说,Thickbox3.1是一个强大且灵活的弹出框解决方案,适合网页设计师和开发者用于增强网站的交互性和用户体验。它以其简洁的代码、丰富的功能和易于集成的特点,成为了许多网站的标准组件。

    Thickbox 3.1插件包

    参考材料可能包含示例代码、API文档或常见问题解答,这些都是快速集成和解决问题的关键资源。对于初学者来说,这些文档是学习Thickbox功能和工作流程的重要工具。 4. **集成Thickbox**: 集成Thickbox通常涉及在...

    jQuery_thickbox3.1

    总之,jQuery_thickbox3.1是一个强大且易于使用的弹出框解决方案,尤其适合需要在网页中展示多种类型内容的开发者。其简洁的设计和丰富的自定义选项,使得它在各种类型的网站中都有广泛的应用。

    ThickBox3.1弹出层

    ThickBox3.1是一款经典的JavaScript和...总体来说,ThickBox3.1是一个强大且灵活的弹出层解决方案,它简化了网页中复杂内容的展示,提升了用户的互动体验。开发者可以根据自己的需求对其进行定制,以适应各种应用场景。

    thickbox demo

    总结来说,Thickbox是基于jQuery的弹出窗口解决方案,提供了丰富的功能和良好的用户体验。开发者可以利用它轻松实现各种弹出效果,提升网站的交互性和美观度。在实际应用中,理解并掌握Thickbox的使用方法,对于前端...

    jquery.thickBox

    **jQuery ThickBox** 是一个基于 **jQuery** 库的弹出层插件,它允许开发者...总之,jQuery ThickBox 是一个强大且灵活的弹出层解决方案,它简化了网页中各种内容的展示方式,提高了用户体验,是网页开发者的得力工具。

    基于jQuery弹出层插件thickbox

    总的来说,thickbox是一个强大且易于集成的jQuery插件,它提供了丰富的弹出层解决方案,可以轻松地增强网页的互动性和用户体验。通过深入理解和灵活运用thickbox,开发者可以快速创建出吸引人的多媒体展示效果,而...

    thickBox回传值

    4. **利用回调函数**:为了解决这个问题,开发者可以使用回调函数。在ThickBox的配置中,可以指定一个回调函数,当`<iframe>`加载完成(即下载开始)或下载结束后,该函数会被调用。在回调函数中,可以利用`window....

    jquery插件thickbox遮罩层的的使用

    本文将详细讲解如何利用jQuery插件Thickbox创建一个遮罩层,为用户提供更好的浏览体验。 Thickbox是一款轻量级的jQuery插件,它能够...无论是在展示图片、视频还是其他网页内容,Thickbox都能提供一个优雅的解决方案。

    ThickBox关闭层自动刷新和页面数据提交冲突问题

    ### ThickBox关闭层自动刷新与页面数据提交冲突问题解析 #### 问题背景及现象 在进行Web开发过程中,经常会遇到需要使用弹出层的情况。ThickBox作为一个常用的弹出层插件,因其简单易用而受到许多开发者的青睐。...

    ThickBox工具

    3. **配置参数**:ThickBox支持一些可选参数,如宽度、高度、自动播放等,这些可以通过在链接的`rel`属性中指定。例如,`rel="thickbox[width=600;height=400;autoPlay=true]"`。 4. **初始化插件**:在页面加载...

    thickbox3.0

    10. **维护和社区支持**:作为一款流行的技术,Thickbox有一个活跃的开发者社区,提供了许多示例代码、插件和解决问题的讨论,帮助用户解决在使用过程中遇到的问题。 综上所述,Thickbox3.0是一个强大且易用的...

    thickbox的使用

    在实际应用中,可能会遇到一些问题,比如当网页上存在Flash元素时,Flash可能会覆盖ThickBox弹出框。为解决这个问题,你需要在Flash的`object`和`embed`标签中添加`wmode="transparent"`参数,这样Flash就会变得透明...

    thickbox2.0

    "Thickbox2.0"是一款非常实用的前端...无论是展示图片、处理表单,还是加载动态内容,Thickbox都能提供一种无缝且优雅的解决方案。对于开发者而言,了解并掌握Thickbox的使用,无疑能提升项目中的用户体验和交互设计。

    很棒的两个thickbox样式

    Thickbox是一款流行的JavaScript库,它允许在网页中创建弹出式...总的来说,这两个Thickbox样式为网页设计师和开发者提供了更丰富、更具个性化的弹出框解决方案,通过适当的配置和调用,能够提升网站的互动性和专业性。

    thickbox------------ jQuery好插件

    总之,Thickbox作为一款成熟的jQuery插件,为网页开发人员提供了便捷、灵活的弹出窗口解决方案,极大地丰富了网页的交互性。通过深入理解和熟练运用Thickbox,我们可以为用户创造更加引人入胜的浏览体验。

    thickbox复活版

    复活版的Thickbox在保留原有优点的同时,对一些旧的特性进行了更新,以适应不断变化的Web技术环境。例如,原有的CSS样式可能已经无法满足现代浏览器的需求,因此在复活版中,开发者可能对样式表进行了重构,使其更加...

Global site tag (gtag.js) - Google Analytics