通过javascript实现的轻量级模态框解决方案TinyBox（支持Ajax）

 
Js/Css/jQuery

实现模态框的解决方案在互联网上能找到不少，但是它们大多需要引入诸如Jquery、Mootools、Dojo、YUI等javascript库。如果仅仅是要实现模态框就引入庞大的类库，岂不是得不偿失。这里为大家提供一款用javascript实现的轻量级模态框解决方案TinyBox。

所谓模态框，就是在当前页面弹出一个子窗口，如果该子窗口不关闭的话，不能操作父窗口功能。

去看一下本解决方案的在线示例：浏览在线示例

作者主页（Author Website）：http://www.leigeber.com

TinyBox的功能特色：

  1. TinyBox是一款独立的的模态框脚本，使用时不需引入其他脚本库。
  2. TinyBox是一款轻量级模态框脚本，它的压缩版本仅有3.5k
  3. 弹出的模态框可调用HTML内容，也可通过ajax调用其它页面
  4. 可用来调用显示图片
  5. 可控制在一定时间后模态框自动关闭
  6. 可控制打开模态框时是否启用载入Loading标识
  7. 可控制模态框大小，也可选择根据模态框内容自适应大小
  8. 可通过简单的CSS控制模态框样式
  9. 该脚本在浏览器Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome下测试通过

TinyBox的使用方法：

  1. 第一步当然是要先引入Tinybox脚本文件及样式
  2. 通过下面语句调用模态框：
    TINY.box.show('advanced.html',1,300,150,1,3)
  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秒后模态框窗口自动关闭，该参数为可选，不写该参数则为不自动关闭

其它说明：

  1. 本解决方案来源：来源，有什么问题可在来源主页联系作者，当然也可在本页面留言，大家一起讨论。
  2. 作者说下个版本会引入新功能，一起期待。

下载示例源码：javascript实现的轻量级模态框解决方案 [下载次数：1041]

有话要说