1)需要的文件 tinybox.js 和jquery.js 还有就是弹出框的样式文件
2)tiny.box.show()可以嵌入文本 图片 网页 可以设置弹出框的样式,适合定制自己喜欢的弹出框
3)代码
//导入js文件
<script type="text/javascript"
src="${basePath}skin_group_web/js/tinybox.js"></script>
<script type="text/javascript" charset="UTF-8"
src="${basePath}skin_group_web/js/jquery-1.9.1.js"></script>
//css样式
<style type="text/css">
#tinybox {
position: absolute;
display: none;
padding: 10px;
background: #ffffff url(${basePath}skin_group_web/image/preload.gif)
no-repeat 50% 50%;
border: 1px solid #62D7FA;
z-index: 2000;
top: 845px;
left: 360.5px;
opacity: 1;
display: block;
width: 600px;
height: 384px;
background-image: none;
}
#tinymask {
position: absolute;
display: none;
opacity: 20%;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1500;
}
#tinycontent {
background: #ffffff;
font-size: 1.1em;
}
</style>
//调用弹出框
<script type="text/javascript">
T$('zx').onclick = function() {
TINY.box.show('${basePath}skin_group_web/infor/zx.jsp', 1, 600,
350, 1)
}//test.html为弹出层对应网页 zx 为ID
T$('an').onclick = function() {
TINY.box.show('${basePath}skin_group_web/infor/an.jsp', 1, 600,
350, 1)
}
T$('as').onclick = function() {
TINY.box.show('${basePath}skin_group_web/infor/as.jsp', 1, 600,
350, 1)
}
/* T$('gwbzh').onclick = function() {
TINY.box.show('${basePath}skin_group_web/infor/byd.jsp', 1, 600, 350, 1)
}//test.html为弹出层对应网页
T$('tsl').onclick = function() {
TINY.box.show('${basePath}skin_group_web/infor/byd.jsp', 1, 600, 350, 1)
}
T$('bq').onclick = function() {
TINY.box.show('${basePath}skin_group_web/infor/byd.jsp', 1, 600, 350, 1)
}
T$('byd').onclick = function() {
TINY.box.show('${basePath}skin_group_web/infor/byd.jsp', 1, 600, 350, 1)
}
T$('df').onclick = function() {
TINY.box.show('${basePath}skin_group_web/infor/byd.jsp', 1, 600, 350, 1)
}
T$('rw').onclick = function() {
TINY.box.show('${basePath}skin_group_web/infor/byd.jsp', 1, 600, 350, 1)
} */
/* var content2 = "<img id='picture' width='554px' height='344px' src='image/img.png'/>";//弹出图片
T$('gwbzh').onclick = function(){TINY.box.show(content2,0,0,0,1);} */
// var content3 = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='550' height='400'><param name='movie' value='flash/as3_clock_2.swf' /><param name='quality' value='high' /><param name='wmode' value='opaque' /><embed height='400' width='550' src='flash/as3_clock_2.swf' type='application/x-shockwave-flash'></embed></object>";//弹出flash动画
// T$('click_test3').onclick = function(){TINY.box.show(content3,0,0,0,1)}
// var content4 = "该浮动div层将在3秒钟内消失。";//弹出层自动消失
// T$('click_test4').onclick = function(){TINY.box.show(content4,0,0,0,0,3)}
</script>
4 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.onclick=TINY.box.hide; window.onresize=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))
}
}
}();
5 但是没有关闭按钮,获取你会悲伤,看完js源代码 估计你会豁然开朗。
m.onclick=TINY.box.hide;
当点击tinymask时,就会隐藏整个box,可以把hide()函数写到页面中,然后再添加一个按钮或者一张图片
<img src="${basePath}skin_group_web/images/closeIcon.png" width="30px" height="30px"
style="margin-left: 92%;cursor: pointer;" onclick="closeWindow();"></img></div>
<script type="text/javascript">
function closeWindow(){
TINY.box.hide();
}
</script>
6 finished!