在弹出窗口外单击弹出关闭的小框

时间:2014-09-14 18:18:48

标签: javascript popup tinybox2

您好,我正在使用小盒子为我们的网站弹出窗口,它工作正常&也可以在点击弹出窗口右上角的十字按钮时关闭它。

但是我想在其中添加一个功能(类似于广告弹出窗口),我只想在用户点击屏幕上的任何位置而不是弹出窗口弹出窗口应该关闭时不需要仅通过单击十字按钮来关闭它。

我正在分享我的tinybox.js代码文件,这样我就可以很容易地了解需要更改的地方。谢谢你们表示感兴趣:

    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))
        },

    }
}();

1 个答案:

答案 0 :(得分:1)

尝试添加代码,以便在点击掩码时隐藏弹出窗口,即m.onclick

您已使用

为关闭按钮声明了隐藏功能
g=document.createElement('div'); g.className='tclose';

g.onclick=TINY.box.hide;

现在你只需要像这样添加m.onclick

m.onclick=g.onclick=TINY.box.hide;

仅供参考,这是tinybox.js中的默认设置。 我希望它能解决你的问题。