js弹出窗口的学习和使用

Thickbox

Thickbox是基于Jquery的，因此使用Thickbox需要下面四个文件：

1. Thickbox.js----Thickbox主文件
2. CSS文件----Thickbox.css
3. 最后一个Loading图片----loadingAnimation.gif 
4. Jquery.js-----Jquery主文件

学习如何弹出一张图片。

引入js文件（注意jquery库文件要在thickbox文件之前），图片放在img元素通过超链接打开，只需要设置超链接的class为thickbox，代码如下所示：

演示效果如下所示：

弹出框的使用

弹出一个页面和弹出一张思路一样，代码如下所示：

运行页面，效果如下所示：

由上可以看出，弹出窗口(div)右上角的关闭按钮为显示为"close or esc key"，而不是中文的; 如果想把它变成[X]或"关闭"应该怎么来办呢？将thickbox.js文件打开，查找关键字"or esc key"，将其删除，并将前面的close更改为[X]或"关闭"，然后把文件另存为UTF-8格式，如果不保存为UTF-8的话，将会出现乱码。如下所示：

重新运行，如下所示:

thickbox 弹出层的遮住层透明度修改：

打开thickbox.css查找.TB_overlayBG 进行更改，如下所示：

t.hickbox插件默认情况是点击灰色的遮罩层就会关闭

把两个$("#TB_overlay").click(tb_remove);去掉就可以取消掉。

 

Tinybox

Tinybox是一个独立的弹出控件，不依赖与其他任何js库。其测试文件结构如下：

其中，javascript代码如下所示：

html页面布局：

运行效果如下：

Javascript高级编程看完后研究一下tinybox的代码，很有实际意义。