最近的项目中比较多使用的 ThickBox，今天就简单介绍下，ThickBox 是一个基于 JQuery 类库的扩展，它能在浏览器界面上显示非常棒的弹出框，它可以显示单图片，多图片，AJAX 请求内容或链接内容。
要使用 ThickBox，需要下载三个文件：
- JS 文件：thickbox.js 或者压缩版本 thickbox-compressed.js。
- CSS 文件：ThickBox.css
- 最后一个 Loading 图片：loadingAnimation.gif
除了以上三个文件之外，你还需要有 jQuery JavaScript 类库 或者压缩版，甚至可以使用 Google 提供 CDN 加速的版本。
ThickBox 使用也非常见，首先在 HTML 文件的 HEAD 导入 jQuery JS 和 ThickBox JS 文件，并且 jQuery JS 文件必须在前：
<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
然后打开 thinkbox.js 文件通过 tb_pathToImage 这个变量来设置 loadingAnimation.gif 文件的路径。
然后在 HEAD 导入 thickbox.css 文件：
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
当然你也可以吧 thickbox.css 里面的内容复制到你现在的 CSS 文件中，最后你只要给 a 元素天添加 class="thickbox" 属性就可以开始用 thickbox。详细使用可以查看 ThickBox 官方教程。
我在使用中碰到的最大问题是，如果网页上有 Flash 的话，往往 Flash 会把 ThickBox 的弹出框给挡住，这时的解决方法也是非常简单，就是给 Flash 设置透明的参数：wmode="transparent"。详细就是给 Flash 的 object 标签添加如下参数：<param name="wmode" value="transparent">，并在 embed 标签中设置 wmode="transparent"，如果使用 AC_FL_RunContent，可以加多一对参数 'wmode','transparent' 即可。如果还是有问题，可以尝试给 Flash 外面增加一个 DIV 标签，并给他设置 z-index:0; 的样式。
分享到：
相关推荐
为了更好地学习Thickbox，你可以参考提供的“thickbox的具体使用方法.txt”文件，里面可能包含更详细的步骤、示例代码和配置选项。通过实践这些例子，你将能够熟练掌握Thickbox的用法，将其无缝融入到你的Web项目中...
或者，对于不带`class="thickbox"`的元素，可以使用`$.thickbox()`方法直接绑定： ```javascript $('#PicList a').click(function() { $.thickBox({href: this.href}); return false; }); ``` #### 结语 ...
为了在网页上启用Thickbox，还需要在页面底部引入jQuery（如果尚未引入）和Thickbox的JavaScript及CSS文件。这可以通过以下方式实现： ```html <script src="https://code.jquery.com/jquery.min.js"></script> ...
ThickBox是一款基于jQuery的轻量级弹出插件，主要包含三个核心文件：`jquery.js`、`thickbox.js`和`thickbox.css`。这些文件协同工作，为网页提供了一种优雅的方式，以全屏或者半透明背景的形式展示图片、内嵌框架、...
这个“ThickBox 3.1调用方法+实例演示.zip”文件似乎包含了关于如何使用ThickBox 3.1版本的详细教程和示例，这对于开发者来说是一个宝贵的资源。 ThickBox 3.1的关键知识点包括： 1. **安装与引入**：首先，你需要...
"Thickbox Demo"是一个基于jQuery的轻量级弹出窗口插件，它允许开发者在网页上实现全屏、模态的图片、HTML内容或IFrame的展示效果...在实际应用中，理解并掌握Thickbox的使用方法，对于前端开发者来说是非常有价值的。
首先，要使用Thickbox，你需要在项目中引入jQuery库和Thickbox插件的相关文件。这通常包括`jquery.js`、`thickbox.js`以及相关的CSS样式文件`thickbox.css`。这些文件可以下载后放在你的项目目录中，或者通过CDN链接...
- **引入资源**：在HTML文件中引入jQuery库和Thickbox的JavaScript及CSS文件。 - **标记链接**：将需要开启Thickbox效果的链接或图片添加特定的类名，如`tb-click-to-open`。 - **配置选项**：通过JavaScript设置...
在使用ThickBox3.1时，开发者需要将库的JavaScript文件和CSS文件引入到网页中。通常，这涉及到在部分添加链接标签，然后在需要使用ThickBox3.1的地方，通过特定的数据属性或者JavaScript API调用来激活弹出层功能。...
7. **易用性**：Thickbox的集成非常简单，只需要在页面中引入相关的CSS和JavaScript文件，然后通过特定的类名标记链接或元素即可。 在"thickbox3.1.zip"压缩包中，你将找到以下组件： - `thickbox.css`：这是...
为了完整实现 Thickbox，除了 jQuery 本身，还需要 Thickbox 的相关文件，例如 `thickbox.css` 和 `thickbox.js`。通常，这些文件会与 jQuery 一起引用，以确保正确运行 Thickbox 插件。 总之，结合 jQuery 和 ...
6. **脚本功能**：thickbox.js和thickbox-compressed.js是Thickbox的JavaScript文件，其中包含了插件的主要逻辑和功能。thickbox-compressed.js是压缩版本，用于减小文件大小，加快页面加载速度。 7. **易用性**：...
这个JavaScript文件是Thickbox的核心，包含了处理用户交互、动态加载内容、调整弹出框大小和位置等功能的代码。它使用AJAX技术来实现无刷新内容加载，提供了一种优雅的方式来展示图片、HTML页面、IFrame和YouTube...
1. **引入依赖**：在HTML文档的`<head>`部分，首先需要引入jQuery库和Thickbox3的JavaScript及CSS文件。 2. **HTML标记**：为要弹出的内容添加特定的HTML标记，比如添加`class="thickbox"`来标识这是一个Thickbox3...
1. **引入依赖**：首先在网页中引入jQuery库和Thickbox3.1的JavaScript及CSS文件。这些文件通常包含在压缩包的`js`和`style`目录下。 2. **添加HTML标记**：为要弹出的内容添加特定的HTML属性，比如对于图片，可以...
在使用ThickBox 3_1 时，你需要将库文件（thickbox3.1）解压并包含到你的网页中，通常包括以下文件： - `thickbox.css`：样式表文件，定义了ThickBox的外观。 - `thickbox.js`：JavaScript 文件，包含了ThickBox的...
在这个场景中，"thickBox回传值"指的是在使用ThickBox进行文件下载时，如何获取或传递下载操作完成后的一些返回信息，比如下载状态、文件信息等。 在ThickBox的使用过程中，通常会遇到以下关键知识点： 1. **...
为了开始使用Thickbox，你需要在网页中引入jQuery库和Thickbox的CSS及JavaScript文件。然后，将Thickbox的样式表（thickbox.css）添加到你的HTML头部，确保所有必要的图片资源（如close按钮等）都可访问。接着，对...
ThickBox 的 JavaScript 代码和 CSS 文件只占12k. 所以压缩过的 jQuery 代码和 ThickBox 总共只有27k. ThickBox 能重新调整大于浏览器窗口的图片. ThickBox 的多功能性包括(图片,iframed 的内容,内嵌的内容,AJAX ...
首先，我们需要了解Thickbox的基本使用方法。Thickbox通过JavaScript和CSS来创建一个全屏的遮罩层，并在其中加载内容。要调用Thickbox，可以使用HTML的`<a>`标签，附加`class="thickbox"`和一些特定的属性，例如`tb_...