实现模态框的解决方案在互联网上能找到不少,但是它们大多需要引入诸如Jquery、Mootools、Dojo、YUI等javascript库。如果仅仅是要实现模态框就引入庞大的类库,岂不是得不偿失。这里为大家提供一款用javascript实现的轻量级模态框解决方案TinyBox。
所谓模态框,就是在当前页面弹出一个子窗口,如果该子窗口不关闭的话,不能操作父窗口功能。
去看一下本解决方案的在线示例:
作者主页(Author Website):
TinyBox的功能特色:
- TinyBox是一款独立的的模态框脚本,使用时不需引入其他脚本库。
- TinyBox是一款轻量级模态框脚本,它的压缩版本仅有3.5k
- 弹出的模态框可调用HTML内容,也可通过ajax调用其它页面
- 可用来调用显示图片
- 可控制在一定时间后模态框自动关闭
- 可控制打开模态框时是否启用载入Loading标识
- 可控制模态框大小,也可选择根据模态框内容自适应大小
- 可通过简单的CSS控制模态框样式
- 该脚本在浏览器Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome下测试通过
TinyBox的使用方法:
- 第一步当然是要先引入Tinybox脚本文件及样式
- 通过下面语句调用模态框:
TINY.box.show('advanced.html',1,300,150,1,3)
- TINY.box.show参数解释:
第一个参数advanced.html,是要调用内容。如果是ajax调用页面,则写该页面的相对路径;如果是调用HTML内容,则传入javascript对象;
第二个参数1,用来标识是否通过ajax调用页面,是为1,否为0;
第三个参数300,用来控制弹出模态框窗口宽度,使用0则为auto自适应;
第四个参数150,用来控制弹出模态框窗口高度,使用0则为auto自适应;
第五个参数1,用来控制是否显示载入Loading标识,1启用,0不启用;
第六个参数3,标识3秒后模态框窗口自动关闭,该参数为可选,不写该参数则为不自动关闭
其它说明:
- 本解决方案来源:,有什么问题可在来源主页联系作者,当然也可在本页面留言,大家一起讨论。
- 作者说下个版本会引入新功能,一起期待。
下载示例源码:
阅读(1731) | 评论(0) | 转发(0) |