TinyBox.js插件在页面上实现超简单的图片、iframe、ajax弹出层

TinyBox已经存在很久了，一直用保存下来的版本，突然发现它升级到2.0了，新增了许多新功能，但是大小依然在5KB左右(5.35KB)，依然非常强大，升级后的脚本支持iframes 和 images弹出层，还可以使用Ajax读取，不过ajax只支持POST数据，cms大学小编测试了get请求并不支持，并且加载和关闭事件回调参数，已经足够大家的自定义需求。而本插件最大的优点在于不需要依赖jquery，在不需要jq的页面会更有优势。

用法示例

1. //弹出test.html页面，并设置了宽高300x150px  
2. TINY.box.show({url:'test.html',width:300,height:150})   
3.    
4. //No Animation, No Close Button, Auto Width/Height, Custom Styling  
5. TINY.box.show({html:'This is a warning!',animate:false,close:false,boxid:'error',top:5})  
6.    
7. //Ajax Post, Fixed Width/Height, Light Mask, Custom Vertical Split  
8. TINY.box.show({url:'post.php',post:'id=16',width:200,height:100,opacity:20,topsplit:3})  
9.    
10. //Custom Position, No Mask, Auto-Hide  
11. TINY.box.show({html:'The entry has been updated successfully!',animate:false,close:false,mask:false,boxid:'success',autohide:2,top:-14,left:-17})  
12.    
13. //iFrame, Blue Mask, Absolute Position, Frameless, Close Callback  
14. TINY.box.show({iframe:'http://www.ipastimes.com/',boxid:'frameless',width:750,height:450,fixed:false,maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}})  
15.    
16. //Ajax, Advanced Functions  
17. TINY.box.show({url:'advanced.html',width:300,height:150})  
18.    
19. //Image, Load Callback  
20. TINY.box.show({image:'images/rhino.jpg',boxid:'frameless',animate:true,openjs:function(){openJS()}}) 

参数详解：

标签（tag）	描述（description）	默认（default）
html	弹出窗口内容，(String)	false
iframe	嵌入URL内容，(String)	false
url	ajax请求路径，(String)	false
post	传送变量，通常配合url使用，(String)	false
image	图片路径，(String)	false
width	预设宽度，(int)	false
height	预设高度,(int)	false
animate	动画(bool)	true
close	关闭按钮(bool)	true
openjs	打开事件回调函数	null
closejs	关闭事件回调函数	null
autohide	显示用户设置时间后自动隐藏(int)	false
boxid	CSS ID 作用于box	‘’
maskid	CSS ID 作用于mask	‘’
fixed	绝对位置	true
opacity	透明度	70
mask	toggle mask display (bool)	true
top	类似css top  (int)	null
left	类似css left  (int)	null
topsplit	1/x where x is the denominator in the split from the top (int)	2