jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等

一、一张图片演示

描述:

这是ThickBox的一个简单实例，这个例子展示了在中放置一张图片（请看演示）。

说明:

• 创建一个link元素 (<a href>)
• 给创建的这个link元素一个class属性，其值是：thickbox (class="thickbox")
• 在href属性中指定一个张图片地址(.jpg .jpeg .png .gif .bmp)

点击图片查看效果:

二、多张图片演示

描述:

这个例子和单张图片差不多，但他允许使用rel属性使多张图片成为一组，在ThickBox里导航。这种完美的使用方法适用于图片集。

使用说明:

• 创建一个link元素 (<a href>)
• 给创建的这个link元素一个class属性，其值是：thickbox; (class="thickbox")
• 在href属性中指定一个张图片地址 (.jpg .jpeg .png .gif .bmp)
• 给每一个link元素一个相同的rel值。（比如：rel="gallery-plants"）

重点提醒:

当你打开一个ThickBox图片集的时候, 你能通过键盘的左右箭头键向前和向前和向后导航（在 ThickBox 里也提供了Next和Previous的链接）。 图片将会在图片集中按HTML文档流程从第一张显示到最后一张。

点击一张图片:

三、内嵌内容演示

描述:

页面中的内嵌内容，隐藏的或是显示的均可以放置在ThickBox中。

使用说明:

• 创建一个link元素(<a href>)
• 给创建的这个link元素一个class属性，其值是：thickbox (class="thickbox")
• 给link元素的href属性设置为: #TB_inline
• 在href属性的值#TB_inlineIn后面追加一下字符:

  ?height=300&width=300&inlineId=myOnPageContent

• 根据你的实际需要更改height, width, 和 inlineId的值（这里的inlineID就是包含你想显示在ThickBox上的内容的容器的id）。
• 当然你也可以在参数字符串中加 modal=true(比如. #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) 这样当关闭ThickBox时会调用ThickBox内部的一个tb_remove()函数。在演示中查看“显示隐藏模式的内容”则要求点击yes 或 no才能关闭ThickBox。

重点提醒:

如果内嵌在ThickBox的内容多于ThickBox显示的尺寸，一个滚动条会出现。请确认ThickBox的尺寸和内容的匹配避免出现滚 动条而显示全部内嵌内容。也就是说，如果不想要滚动条，你可以增加ThickBox的宽和高直到内嵌的内容不需要滚动条就能全部显示。

点击“显示”按钮后，将在中看到下面的一段文字以及那个写了”测试“的input，或是点击 显示隐藏模式的内容  则显示在本文档中隐藏起来id为“hiddenModalContent”的div内的内容

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

四、iFramed 内容

描述:

在ThickBox中打开被 iFramed URL.哈, 这正 Greybox的功能.在打开URL的ThickBox iframe的内部. 是的,这是Greybox 功能.

使用说明:

• 创建一个link元素 (<a href>)
• 给创建的这个link元素一个class属性，其值是：thickbox (class="thickbox")
• 给link元素的href属性指向一个你希望在ThickBox显示的URL。
• href属性的URL后面追加上以下字符参数：

  ?KeepThis=true&TB_iframe=true&height=400&width=600

• 根据你的实际需要改变上面的参数字符。
• 当然你也可以在参数字符串中加 modal=true
  (比如：?KeepThis=true& TB_iframe=true&height=400&width=600&modal=true) 这样当关闭ThickBox时会调用ThickBox iframe (self.parent.tb_remove())内部的一个tb_remove()函数。在演示中查看“打开iFrame Modal的演示”则要求点击ok才能关闭ThickBox。

重点提醒:

所有其他参数字符都必须在TB_iframe 参数之前。URL中所有"TB" 之后的将被移除。

例子1 例子2 iFrame Modal被打开的演示

五、ajax 内容演示

描述:

采用一个隐藏的HTTP request (AJAX) 从同一个服务器上获取文件，并使用显示其内容。

使用说明:

• 创建一个link元素 (<a href>)
• 给创建的这个link元素一个class属性，其值是：thickbox (class="thickbox")
• 给link元素的href属性指向一个链接文件或是服务器目录。(href="ajaxLogin.htm")
• 在href属性的URL后面追加以下字符来结束URL:

  ?height=300&width=300

• 根据需要更改宽和高的值。
• 当然，你也可以在上面的参数字符串再加上modal=true(比如. ?height=300&width=300&modal=true) 这样当关闭ThickBox时会调用ThickBox内部的一个tb_remove()函数。在演示中查看“login”这个例子则要求点击yes 或 no才能关闭ThickBox。

重点提醒:

为了在新打开的Ajax ThickBox中打开新的Ajax内容，他的代码必须包含适当的 HTML (class=""thickbox) 来加载一个Ajax ThickBox (请留意演示例子)。其他唯一需要注意的一个地方就是调用的ThickBox必须包含宽和高，如果你给这两项留空，则窗口会自适应到默认大小 （630*440）.