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,代码如下所示:

js弹出窗口的学习和使用

演示效果如下所示:

js弹出窗口的学习和使用

弹出框的使用

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

js弹出窗口的学习和使用

运行页面,效果如下所示:

js弹出窗口的学习和使用

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

js弹出窗口的学习和使用

重新运行,如下所示:

js弹出窗口的学习和使用

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

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

js弹出窗口的学习和使用

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

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

 

Tinybox

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

js弹出窗口的学习和使用

其中,javascript代码如下所示:

js弹出窗口的学习和使用

html页面布局:

js弹出窗口的学习和使用

运行效果如下:

js弹出窗口的学习和使用
js弹出窗口的学习和使用

js弹出窗口的学习和使用
js弹出窗口的学习和使用

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

 

上一篇:js弹出窗口


下一篇:Getting Started with ASP.NET Web API 2 (C#)