首页 > 特效插件 > 表格弹出层 >  TinyBox JS弹出层插件正文

TinyBox JS弹出层插件

特效介绍
TinyBox JS弹出层插件
TinyBox JS弹出层插件

TinyBox JS弹出层插件是一款简单实用，功能强大的插件，能够实现跨页面调用，支持显示本页面内容，调用其他页面，甚至支持ajax的调用。
使用方法
1、引入tinybox.js和style.css

2、添加调用事件。下面举几个例子，具体怎么调用，看例子即可：

①按钮点击，TinyBox弹出层显示一张图片： 
var content2 = "<img src='images/rhino.jpg' width='298' height='373' alt='' />";
T$('testclick2').onclick = function(){
    TINY.box.show(content2,0,0,0,1)
}
注：T$是TinyBox自定义的函数，获取dom的ID。

②显示内容，三秒后消失： 
var content3 = "3秒就会消失 - TinyBox弹出层 - 我爱模板网";
T$('testclick3').onclick = function(){
    TINY.box.show(content3,0,0,0,0,3)
}
③显示一个页面： 
T$('testclick1').onclick = function(){
    TINY.box.show('advanced.html',1,300,150,1)
}
上面代码调用的advanced.html页面的代码如下： 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body>
<p>这些内容来自一个AJAX请求。 你可以很容易地使用TinyBox <a href="javascript:TINY.box.size('tinybox',450,300,4)">放大</a>和<a href="javascript:TINY.box.size('tinybox',200,175,4)">收缩</a>弹出. 还可以<a href="javascript:TINY.box.hide()">关闭</a>.</p>
<p><a href="javascript:TINY.box.fill('静态内容',0,0,0,1)">点击 </a> 加载一些静态HTML 和 <a href="javascript:TINY.box.fill('ajax.html',1,0,0,1)">点击 </a>ajax加载HTML表格。</p>
</body>
</html>
注：从advanced.html可以看出，TinyBox可以跨页面调用，在advanced.html页面，它实现了调用ajax页面的方法，以及关闭窗口的方法(实际上，不用关闭窗口的按钮，点击页面空白处也可以关闭窗口)
TAGS: TinyBox弹出层  JS弹出层插件