<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Ext.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>酷酷的弹出层</title>
<style type="text/css">
body{background:#eeeeee; font-size:63%;}
.box{width:70%; padding:30px; margin:0 auto; background:#ffffff; border:1px solid #cccccc;}
h3{font:bold 1.6em/2em "宋体";}
.title{padding:0.8em 0 0.8em 1em; background:#eeeeee; border:1px solid #d0d0d0; font-size:1.4em; font-weight:bold; margin:20px auto 15px;}
.content{margin:0; line-height:1.5; font-size:1.2em;}
.a_blue{color:#0066CC; font-size:0.9em; font-weight:normal; margin-left:30px;}
.a_blue:hover{color:#009999; text-decoration:none;}
#tinybox{position:absolute; display:none; padding:10px; background:#ffffff url(image/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000}
#tinymask{position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000000; z-index:1500}
#tinycontent{background:#ffffff; font-size:1.2em;}
</style>
<script type="text/javascript" src="Scripts/tinybox.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="box">
<h3></h3>
<div class="title">加载一个静态页面<a class="a_blue" href="#zhangxinxu" id="click_test1">效果预览</a></div>
<div class="content">加载一个静态页面，这里可能无法测试出来，在服务器项目里可以看见效果</div>
<div class="title">图片<a class="a_blue" href="#zhangxinxu" id="click_test2">效果预览</a></div>
<div class="content">用酷酷的浮动层显示图片</div>
<div class="title">自动隐藏<a class="a_blue" href="#zhangxinxu" id="click_test3">效果预览</a></div>
<div class="content">层显示一段时间后自动隐藏，当作提示用是个很不错的选择</div>
</div>
<script type="text/javascript">
T$('click_test1').onclick = function () { TINY.box.show('word-mix-widh-auto-btn.html', 1, 300, 150, 1) }
var content2 = "<img width='600' height='480' src='images/a.jpg' border='0' />";
T$('click_test2').onclick = function () { TINY.box.show(content2, 0, 0, 0, 1) }
var content3 = "该浮动层将在3秒钟内消失。";
T$('click_test3').onclick = function () { TINY.box.show(content3, 0, 0, 0, 0, 3) }
</script>
</form>
</body>
</html>
tinybox.js代码一下：
var TINY={};
function T$(i){return document.getElementById(i)}
TINY.box=function(){
var p,m,b,fn,ic,iu,iw,ih,ia,f=0;
return{
show:function(c,u,w,h,a,t){
if(!f){
p=document.createElement('div'); p.id='tinybox';
m=document.createElement('div'); m.id='tinymask';
b=document.createElement('div'); b.id='tinycontent';
document.body.appendChild(m); document.body.appendChild(p); p.appendChild(b);
m.οnclick=TINY.box.hide; window.οnresize=TINY.box.resize; f=1
}
if(!a&&!u){
p.style.width=w?w+'px':'auto'; p.style.height=h?h+'px':'auto';
p.style.backgroundImage='none'; b.innerHTML=c
}else{
b.style.display='none'; p.style.width=p.style.height='100px'
}
this.mask();
ic=c; iu=u; iw=w; ih=h; ia=a; this.alpha(m,1,80,3);
if(t){setTimeout(function(){TINY.box.hide()},1000*t)}
},
fill:function(c,u,w,h,a){
if(u){
p.style.backgroundImage='';
var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
x.onreadystatechange=function(){
if(x.readyState==4&&x.status==200){TINY.box.psh(x.responseText,w,h,a)}
};
x.open('GET',c,1); x.send(null)
}else{
this.psh(c,w,h,a)
}
},
psh:function(c,w,h,a){
if(a){
if(!w||!h){
var x=p.style.width, y=p.style.height; b.innerHTML=c;
p.style.width=w?w+'px':''; p.style.height=h?h+'px':'';
b.style.display='';
w=parseInt(b.offsetWidth); h=parseInt(b.offsetHeight);
b.style.display='none'; p.style.width=x; p.style.height=y;
}else{
b.innerHTML=c
}
this.size(p,w,h,4)
}else{
p.style.backgroundImage='none'
}
},
hide:function(){
TINY.box.alpha(p,-1,0,5)
},
resize:function(){
TINY.box.pos(); TINY.box.mask()
},
mask:function(){
m.style.height=TINY.page.theight()+'px';
m.style.width=''; m.style.width=TINY.page.twidth()+'px'
},
pos:function(){
var t=(TINY.page.height()/2)-(p.offsetHeight/2); t=t<10?10:t;
p.style.top=(t+TINY.page.top())+'px';
p.style.left=(TINY.page.width()/2)-(p.offsetWidth/2)+'px'
},
alpha:function(e,d,a,s){
clearInterval(e.ai);
if(d==1){
e.style.opacity=0; e.style.filter='alpha(opacity=0)';
e.style.display='block'; this.pos()
}
e.ai=setInterval(function(){TINY.box.twalpha(e,a,d,s)},20)
},
twalpha:function(e,a,d,s){
var o=Math.round(e.style.opacity*100);
if(o==a){
clearInterval(e.ai);
if(d==-1){
e.style.display='none';
e==p?TINY.box.alpha(m,-1,0,3):b.innerHTML=p.style.backgroundImage=''
}else{
e==m?this.alpha(p,1,100,5):TINY.box.fill(ic,iu,iw,ih,ia)
}
}else{
var n=o+Math.ceil(Math.abs(a-o)/s)*d;
e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'
}
},
size:function(e,w,h,s){
e=typeof e=='object'?e:T$(e); clearInterval(e.si);
var ow=e.offsetWidth, oh=e.offsetHeight,
wo=ow-parseInt(e.style.width), ho=oh-parseInt(e.style.height);
var wd=ow-wo>w?-1:1, hd=(oh-ho>h)?-1:1;
e.si=setInterval(function(){TINY.box.twsize(e,w,wo,wd,h,ho,hd,s)},20)
},
twsize:function(e,w,wo,wd,h,ho,hd,s){
var ow=e.offsetWidth-wo, oh=e.offsetHeight-ho;
if(ow==w&&oh==h){
clearInterval(e.si); p.style.backgroundImage='none'; b.style.display='block'
}else{
if(ow!=w){e.style.width=ow+(Math.ceil(Math.abs(w-ow)/s)*wd)+'px'}
if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}
this.pos()
}
}
}
}();
TINY.page=function(){
return{
top:function(){return document.body.scrollTop||document.documentElement.scrollTop},
width:function(){return self.innerWidth||document.documentElement.clientWidth},
height:function(){return self.innerHeight||document.documentElement.clientHeight},
theight:function(){
var d=document, b=d.body, e=d.documentElement;
return Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight))
},
twidth:function(){
var d=document, b=d.body, e=d.documentElement;
return Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth))
}
}
}();
2135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
