Javascript 在弹出窗口外单击关闭小框弹出窗口
大家好，我正在使用我们的网站弹出窗口的小框，它的工作很好，也可以关闭它，同时点击弹出窗口右上方的交叉按钮 但我想在其中添加一个功能（类似于广告弹出），我只想当用户点击屏幕上的任何地方而不是弹出窗口时，弹出窗口应该关闭，无需只点击交叉按钮即可关闭 我正在共享我的tinybox.js代码文件，以便我能够轻松了解需要更改的位置。感谢您展示intrest：Javascript 在弹出窗口外单击关闭小框弹出窗口,javascript,popup,tinybox2,Javascript,Popup,Tinybox2,大家好，我正在使用我们的网站弹出窗口的小框，它的工作很好，也可以关闭它，同时点击弹出窗口右上方的交叉按钮 但我想在其中添加一个功能（类似于广告弹出），我只想当用户点击屏幕上的任何地方而不是弹出窗口时，弹出窗口应该关闭，无需只点击交叉按钮即可关闭 我正在共享我的tinybox.js代码文件，以便我能够轻松了解需要更改的位置。感谢您展示intrest： TINY={}; TINY.box=function(){ var j,m,b,g,v,p=0; return{
TINY={};
TINY.box=function(){
var j,m,b,g,v,p=0;
return{
show:function(o){
v={opacity:70,close:1,animate:1,fixed:1,mask:1,maskid:'',boxid:'',topsplit:2,url:0,post:0,height:0,width:0,html:0,iframe:0};
for(s in o){v[s]=o[s]}
if(!p){
j=document.createElement('div'); j.className='tbox';
p=document.createElement('div'); p.className='tinner';
b=document.createElement('div'); b.className='tcontent';
m=document.createElement('div'); m.className='tmask';
g=document.createElement('div'); g.className='tclose'; g.v=0;
document.body.appendChild(m); document.body.appendChild(j); j.appendChild(p); p.appendChild(b);
g.onclick=TINY.box.hide; window.onresize=TINY.box.resize
}else{
j.style.display='none'; clearTimeout(p.ah); if(g.v){p.removeChild(g); g.v=0}
}
p.id=v.boxid; m.id=v.maskid; j.style.position=v.fixed?'fixed':'absolute';
if(v.html&&!v.animate){
p.style.backgroundImage='none'; b.innerHTML=v.html; b.style.display='';
p.style.width=v.width?v.width+'px':'auto'; p.style.height=v.height?v.height+'px':'auto'
}else{
b.style.display='none';
if(!v.animate&&v.width&&v.height){
p.style.width=v.width+'px'; p.style.height=v.height+'px'
}else{
p.style.width=p.style.height='100px'
}
}
if(v.mask){this.mask(); this.alpha(m,1,v.opacity)}else{this.alpha(j,1,100)}
if(v.autohide){p.ah=setTimeout(TINY.box.hide,1000*v.autohide)}else{document.onkeyup=TINY.box.esc}
},
fill:function(c,u,k,a,w,h){
if(u){
if(v.image){
var i=new Image(); i.onload=function(){w=w||i.width; h=h||i.height; TINY.box.psh(i,a,w,h)}; i.src=v.image
}else if(v.iframe){
this.psh('<iframe src="'+v.iframe+'" width="'+v.width+'" frameborder="0" height="'+v.height+'"></iframe>',a,w,h)
}else{
var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
x.onreadystatechange=function(){
if(x.readyState==4&&x.status==200){p.style.backgroundImage=''; TINY.box.psh(x.responseText,a,w,h)}
};
if(k){
x.open('POST',c,true); x.setRequestHeader('Content-type','application/x-www-form-urlencoded'); x.send(k)
}else{
x.open('GET',c,true); x.send(null)
}
}
}else{
this.psh(c,a,w,h)
}
},
psh:function(c,a,w,h){
if(typeof c=='object'){b.appendChild(c)}else{b.innerHTML=c}
var x=p.style.width, y=p.style.height;
if(!w||!h){
p.style.width=w?w+'px':''; p.style.height=h?h+'px':''; b.style.display='';
if(!h){h=parseInt(b.offsetHeight)}
if(!w){w=parseInt(b.offsetWidth)}
b.style.display='none'
}
p.style.width=x; p.style.height=y;
this.size(w,h,a)
},
esc:function(e){e=e||window.event; if(e.keyCode==27){TINY.box.hide()}},
hide:function(){TINY.box.alpha(j,-1,0,3); document.onkeypress=null; if(v.closejs){v.closejs()}},
resize:function(){TINY.box.pos(); TINY.box.mask()},
mask:function(){m.style.height=this.total(1)+'px'; m.style.width=this.total(0)+'px'},
pos:function(){
var t;
if(typeof v.top!='undefined'){t=v.top}else{t=(this.height()/v.topsplit)-(j.offsetHeight/2); t=t<20?20:t}
if(!v.fixed&&!v.top){t+=this.top()}
j.style.top=t+'px';
j.style.left=typeof v.left!='undefined'?v.left+'px':(this.width()/2)-(j.offsetWidth/2)+'px'
},
alpha:function(e,d,a){
clearInterval(e.ai);
if(d){e.style.opacity=0; e.style.filter='alpha(opacity=0)'; e.style.display='block'; TINY.box.pos()}
e.ai=setInterval(function(){TINY.box.ta(e,a,d)},20)
},
ta:function(e,a,d){
var o=Math.round(e.style.opacity*100);
if(o==a){
clearInterval(e.ai);
if(d==-1){
e.style.display='none';
e==j?TINY.box.alpha(m,-1,0,2):b.innerHTML=p.style.backgroundImage=''
}else{
if(e==m){
this.alpha(j,1,100)
}else{
j.style.filter='';
TINY.box.fill(v.html||v.url,v.url||v.iframe||v.image,v.post,v.animate,v.width,v.height)
}
}
}else{
var n=a-Math.floor(Math.abs(a-o)*.5)*d;
e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'
}
},
size:function(w,h,a){
if(a){
clearInterval(p.si); var wd=parseInt(p.style.width)>w?-1:1, hd=parseInt(p.style.height)>h?-1:1;
p.si=setInterval(function(){TINY.box.ts(w,wd,h,hd)},20)
}else{
p.style.backgroundImage='none'; if(v.close){p.appendChild(g); g.v=1}
p.style.width=w+'px'; p.style.height=h+'px'; b.style.display=''; this.pos();
if(v.openjs){v.openjs()}
}
},
ts:function(w,wd,h,hd){
var cw=parseInt(p.style.width), ch=parseInt(p.style.height);
if(cw==w&&ch==h){
clearInterval(p.si); p.style.backgroundImage='none'; b.style.display='block'; if(v.close){p.appendChild(g); g.v=1}
if(v.openjs){v.openjs()}
}else{
if(cw!=w){p.style.width=(w-Math.floor(Math.abs(w-cw)*.6)*wd)+'px'}
if(ch!=h){p.style.height=(h-Math.floor(Math.abs(h-ch)*.6)*hd)+'px'}
this.pos()
}
},
top:function(){return document.documentElement.scrollTop||document.body.scrollTop},
width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth},
height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},
total:function(d){
var b=document.body, e=document.documentElement;
return d?Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)):
Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth))
},
}
}();
TINY={}；
TINY.box=函数（）{
变量j，m，b，g，v，p=0；
返回{
显示：功能（o）{
v={opacity:70，close:1，animate:1，fixed:1，maskid:''，boxid:''，topplit:2，url:0，post:0，height:0，width:0，html:0，iframe:0}；
对于（s in o）{v[s]=o[s]}
如果（！p）{
j=document.createElement（'div'）；j.className='tbox'；
p=document.createElement（'div'）；p.className='tinner'；
b=document.createElement（'div'）；b.className='tcontent'；
m=document.createElement（'div'）；m.className='tmask'；
g=document.createElement（'div'）；g.className='tclose'；g.v=0；
document.body.appendChild（m）；document.body.appendChild（j）；j.appendChild（p）；p.appendChild（b）；
g、 onclick=TINY.box.hide；window.onresize=TINY.box.resize
}否则{
j、 style.display='none'；clearTimeout（p.ah）；if（g.v）{p.removeChild（g）；g.v=0}
}
p、 id=v.boxid；m.id=v.maskid；j.style.position=v.fixed？'fixed'：'absolute'；
如果（v.html&！v.animate）{
p、 style.backgroundImage='none'；b.innerHTML=v.html；b.style.display=''；
p、 style.width=v.width？v.width+'px'：'auto'；p.style.height=v.height？v.height+'px'：'auto'
}否则{
b、 style.display='none'；
如果（！v.animate&&v.width&&v.height）{
p、 style.width=v.width+'px'；p.style.height=v.height+'px'
}否则{
p、 style.width=p.style.height='100px'
}
}
if（v.mask）{this.mask（）；this.alpha（m，1，v.opacity）}else{this.alpha（j，1100）}
if（v.autohide）{p.ah=setTimeout（TINY.box.hide，1000*v.autohide）}else{document.onkeyup=TINY.box.esc}
},
填充：函数（c，u，k，a，w，h）{
如果（u）{
if（v.image）{
var i=new Image（）；i.onload=function（）{w=w | | i.width；h=h | | i.height；TINY.box.psh（i，a，w，h）}；i.src=v.Image
}否则如果（v.iframe）{
这个。psh（“”，a，w，h）
}否则{
var x=window.XMLHttpRequest？new-XMLHttpRequest（）：new-ActiveXObject（'Microsoft.XMLHTTP'）；
x、 onreadystatechange=函数（）{
如果（x.readyState==4&&x.status==200）{p.style.backgroundImage=''；TINY.box.psh（x.responseText，a，w，h）}
};
如果（k）{
x、 open（'POST'，c，true）；x.setRequestHeader（'Content-type'，'application/x-www-form-urlencoded'）；x.send（k）
}否则{
x、 open（'GET'，c，true）；x.send（null）
}
}
}否则{
本.psh（c，a，w，h）
}
},
psh：功能（c、a、w、h）{
if（typeof c=='object'）{b.appendChild（c）}else{b.innerHTML=c}
变量x=p.style.width，y=p.style.height；
如果（！w | |！h）{
p、 style.width=w？w+'px'：''；p.style.height=h？h+'px'：''；b.style.display=''；
如果（！h）{h=parseInt（b.offsetHeight）}
如果（！w）{w=parseInt（b.offsetWidth）}
b、 style.display='none'
}
p、 样式宽度=x；p.样式高度=y；
该尺寸（w、h、a）
},
esc:function（e）{e=e | | window.event；if（e.keyCode==27）{TINY.box.hide（）}，
hide:function（）{TINY.box.alpha（j，-1,0,3）；document.onkeypress=null；if（v.closejs）{v.closejs（）}，
调整大小：function（）{TINY.box.pos（）；TINY.box.mask（）}，
掩码：function（）{m.style.height=this.total（1）+'px'；m.style.width=this.total（0）+'px'}，
pos:function（）{
变量t；
如果（typeof v.top！='undefined'）{t=v.top}或者{t=（this.height（）/v.topplit）-（j.offsetHeight/2）；t=tw？-1:1，hd=parseInt（p.style.height）>h？-1:1；
p、 si=setInterval（function（）{TINY.box.ts（w，wd，h，hd）}，20）
}否则{
p、 style.backgroundImage='none'；if（v.close）{p.appendChild（g）；g.v=1}
p、 style.width=w+'px'；p.style.height=h+'px'；b.style.display=''；this.pos（）；
如果（v.openjs）{v.openjs（）}
}
},
ts：功能（w、wd、h、hd）{
var cw=parseInt（p.style.width），ch=parseInt（p.style.height）；
如果（cw==w&&ch==h）{
clearInterval（p.si）；p.style.backgroundImage='none'；b.style.display='block'；if（v.close）{p.appendChild（g）；g.v=1}
如果（v.openjs）{v.openjs（）}
}否则{
如果（cw！=w）{p.style.width=（w-Math.floor）（Math.abs（w-cw）*.6）*wd）+'px'}
如果（ch！=h）{p.style.height=（h-Math.floor（Math.abs（h-ch）*.6）*hd）+'px'}
this.pos（）
}
},
top:function（）{return document.documentElement.scrollTop | | document.body.scrollTop}，
宽度：函数（）{return self.innerWidth | | | document.documentElement.clientWidth | | | document.body.clientWidth}，
高度：函数（）{return self.innerHeight | | | | document.documentElement.clientHeight | | | document.body.clientHeight}，
总数：职能（d）{
var b=document.body，e=document.documentElement；
返回d？Math.max（Math.max（b.scrollHeight，e.scrollHeight），Math.max（b.clientHeight，e.clientHeight））：
max（Math.max（b.scrollWidth，e.scrollWidth），Math.max（b.clientWidth，e.clientWidth））
},
}
}();
g=document.createElement('div'); g.className='tclose';
g.onclick=TINY.box.hide;
m.onclick=g.onclick=TINY.box.hide;