使用thickbox层,但是事件发生在iframe层,导致只有iframe层呈现thickbox,而外层页面涛声依旧,很是难看。
修改忙活了很长时间,终于找到一个解决方案。
我们要达到iframe层事件触发的thickbox影响到整个页面,可对thickbox.js稍做修改。
本人IE 7.0 ,thickbox.js 3.1 ,jquery-1.2.6.js
1.iframe内嵌页面
<link rel="stylesheet" href="/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
[b]2.iframe上层页面,注意,上级页面也需要加入下列信息[b]
<link rel="stylesheet" href="/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
3.修改thickbox.js
原代码
function tb_init(domChunk){
$(domChunk).click(function(){
var t = this.title || this.name || null;
var a = this.href || this.alt;
var g = this.rel || false;
tb_show(t,a,g);
this.blur();
return false;
});
}
修改为:
function tb_init(domChunk){
$(domChunk).click(function(){
var t = this.title || this.name || null;
var a = this.href || this.alt;
var g = this.rel || false;
self.parent.tb_show(t,a,g);//××××××××××××
this.blur();
return false;
});
}
哈哈,成功了!
分享到:
相关推荐
本文将详细介绍如何在项目中集成和使用ThickBox插件,包括其基本配置、常见使用场景以及一些进阶技巧。 #### 一、集成ThickBox 首先,确保在项目中引入了jQuery库和ThickBox插件。在HTML文档的`<head>`部分加入...
Thickbox是一款流行的JavaScript插件,它为网页提供了一种优雅的方式来展示图片、HTML内容以及Iframe,所有这些都在一个模态窗口中,也就是我们常说的弹出层或浮窗。这个插件的设计目的是增强用户体验,让用户在不...
使用thickbox,开发者首先需要在网页中引入jQuery库和thickbox插件的CSS与JavaScript文件。然后,可以通过给需要弹出的元素添加特定的类名(如"thickbox")或使用jQuery选择器来触发插件。例如,对于一个链接,我们...
- **嵌入内容**:不仅限于图片,ThickBox还可以加载任何内嵌在页面中的HTML元素,如iframe,用于展示网页、视频或其他嵌入式内容。 - **AJAX加载**:通过AJAX技术,ThickBox可以动态获取并加载远程页面内容,实现无...
综上所述,Thickbox 3.1插件包提供了一套完整的解决方案,用于在网页中实现专业级的弹出框功能。无论是展示多媒体内容还是增强用户交互,Thickbox都是一个强大而实用的选择,其丰富的功能和文档使得开发过程变得更加...
在本篇文章中,我们将深入探讨Thickbox的使用方法,并通过实例来进一步理解其工作原理。 首先,我们需要在项目中引入Thickbox的CSS和JavaScript文件。Thickbox通常会提供一个压缩包,包含以下文件: - thickbox.css...
ThickBox 能在使用者滚动页面或改变浏览器窗口大小的同时始终保持居中. 点击图片, 覆盖层, 或关闭链接能移除 ThickBox. ThickBox 的创作者决定动画应该因人而异, 所以 ThickBox 不再使用动画了. 这是特性吗? 哦, 有...
4. **初始化插件**:在文档加载完成后,通过JavaScript调用ThickBox插件,如`$('a.thickbox').thickbox();`。 5. **处理Ajax内容**:如果要加载Ajax内容,需要配置`rel`属性,并指定Ajax请求的URL。 四、示例代码 ...
通过访问这个链接,你可以看到如何在实际项目中应用Thickbox3,包括如何调用插件、配置参数以及如何与jQuery的其他功能结合使用。这个例子包含了一些源文件,意味着你可以下载并研究它们,以便在自己的项目中复制...
Thickbox是一款流行的JavaScript插件,它允许网页开发者在页面上创建一个弹出式的轻量级框架,用于显示图片、HTML内容、Iframe或者Ajax加载的内容。这个"thickbox3.1.zip"文件包含了Thickbox的3.1版本,它在网页设计...
在“thickbox3.1实例”中,我们将深入探讨这个插件的功能、用法以及如何在项目中实现它。 首先,Thickbox的核心功能是提供一种优雅的方式来展示多媒体内容,无需离开当前页面。它利用CSS和JavaScript技术,使得弹出...
Thickbox是一款流行的jQuery插件,它为网页提供了一种优雅的方式来展示图片、HTML内容、iframe和Ajax加载的页面,所有这些都在一个响应式的轻量级弹出窗口中。这个"thickbox简单实例"的压缩包文件包含了使用Thickbox...
在某些应用场景中,用户可能希望在关闭ThickBox的同时刷新父页面,例如在进行了一些操作后需要更新页面数据。ThickBox可以被配置为在关闭时触发一个特定的JavaScript函数,例如刷新页面的`window.location.reload()`...
3. **初始化 Thickbox**:在页面加载完成后,使用 jQuery 的 `$(document).ready()` 函数来初始化 Thickbox 插件。 4. **配置选项**:可以通过修改 JavaScript 代码中的选项来调整 Thickbox 的行为,如设定过渡效果...
Thickbox是一款流行的JavaScript插件,它允许在网页上创建弹出式的图片、iframe和多媒体内容,无需离开当前页面。这个“thickbox实例”压缩包文件包含的是Thickbox 2.0版本的一些示例代码,对于学习如何在网站上实现...
在项目中使用`ThickBox`,首先需要在页面中引入jQuery库和`ThickBox`的JavaScript与CSS文件。接着,通过添加特定的HTML属性或者使用jQuery选择器来标记需要触发弹出窗口的元素。例如,对于图片预览,可以这样写: `...
4. **初始化插件**:如果需要在页面加载后动态生成弹出层,可以使用jQuery的`.thickbox()`方法来初始化。 在实际应用中,Thickbox3.1的压缩包可能包含以下文件: 1. `thickbox.css`:包含Thickbox的默认样式。 2. ...
要使用Thickbox,开发者需要在页面中引入jQuery库和Thickbox的CSS与JS文件,然后按照文档或示例对链接或按钮添加特定的类名和属性,Thickbox会自动处理这些元素的点击事件,生成弹出窗口。 总结来说,Thickbox是...
当用户点击一个链接或图片时,Thickbox插件会捕获这个事件,然后在页面上生成一个弹出层,显示选定的内容。它支持多种类型的内容: 1. 图像:Thickbox可以轻松地处理单张图片或者图片画廊。当用户点击一个链接到...
thickbox.js插件学习,很实用,很好用,很灵活,可以在iframe里任意定义。入门实例。http://blog.csdn.net/greatverve/archive/2008/12/23/3588955.aspx我的网址:www.0379zd.com