Thickbox
Thickbox是基于Jquery的,因此使用Thickbox需要下面四个文件:
- Thickbox.js----Thickbox主文件
- CSS文件----Thickbox.css
- 最后一个Loading图片----loadingAnimation.gif
- 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的代码,很有实际意义。