实现模态框的解决方案在互联网上能找到不少，但是它们大多需要引入诸如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秒后模态框窗口自动关闭，该参数为可选，不写该参数则为不自动关闭
其它说明：
- 本解决方案来源：，有什么问题可在来源主页联系作者，当然也可在本页面留言，大家一起讨论。
- 作者说下个版本会引入新功能，一起期待。
下载示例源码：
阅读(1727) | 评论(0) | 转发(0) |
