tiny.box.show()弹出框

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 = "";//弹出图片
         T$('gwbzh').onclick = function(){TINY.box.show(content2,0,0,0,1);}  */

        // var content3 = "";//弹出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！