tiny.box.show()弹出框

最新推荐文章于 2020-10-13 01:00:20 发布
最新推荐文章于 2020-10-13 01:00:20 发布
阅读量2.4k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011050631/article/details/48465555
版权

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！

千年白狐情
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
yolov3-tiny.conv.15.rar
04-26
在这个场景中，我们关注的是预训练模型"yolov3-tiny.conv.15"，它被压缩在名为"yolov3-tiny.conv.15.rar"的文件中，并且包含两个子文件：yolov3-tiny.conv.11和yolov3-tiny.conv.15。 YOLOv3是对原始YOLOv1和YOLOv2...
yolov4-tiny.conv.29
07-15
tiny yoloV4的预训练权重 yolov4-tiny.conv.29 tiny比较小，速度非常快，结合opencv可以实时检测。效果相当的棒。
TinyBox.js插件在页面上实现超简单的图片、iframe、ajax弹出层
Copy_ing的博客
09-12 1251
TinyBox已经存在很久了，一直用保存下来的版本，突然发现它升级到2.0了，新增了许多新功能，但是大小依然在5KB左右(5.35KB)，依然非常强大，升级后的脚本支持iframes 和 images弹出层，还可以使用Ajax读取，不过ajax只支持POST数据，cms大学小编测试了get请求并不支持，并且加载和关闭事件回调参数，已经足够大家的自定义需求。而本插件最大的优点在于不需要依赖jquer...
jquery弹出插件
weixin_30387663的博客
12-05 152
对于jquery弹出插件，想起自己刚学习js那会，在实习的时候做过一个，唉，做工太粗浅了。 点击看效果demo (function($, window, document,undefined){ var dialogInfo = { message: 'this ia a message', // 消息内容 style: 'info', // 弹窗类型 ...
js特效(弹出窗口)--整死我了(3)
热门推荐
tianhandigeng1498的专栏
12-01 1万+
     今天要写的是关于弹出窗口的，各位肯定看到这样的效果：点击登录的时候，弹出一个背景为黑色的窗口，其实要说做这样的效果也不难，但是对于像我这样js没认真学，又要实现效果的朋友来说，是有点难的，今天弄了一天，这个效果，勉强是实现了这样的效果，但是不是很完美，当然了，我是不可能现在自己写出来的，只能用插件了，在网上找 了很多，问别人也问了很久，弄出来两个，我觉得还是挺好用的，只是有些效果还不能直接实现出来，好了现在来看看吧：     在看之前我先说一下我要做的效果：我的页面中有许多从数据库查询出来的数据，
酷酷的弹出层
Mars的专栏
05-11 911
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">    酷酷的弹出层 body{background:#eeeeee; font-size:63%;}.box{width:70%; padding:30px; margin:0 auto; background:#f
tiny.box.show_将具有15年历史的.NET 1.1虚拟CPU Tiny操作系统学校项目移植到.NET Core 2.0
10-13 229
tiny.box.showGarage Sale Code" online. So here's some crappy code. ;)车库销售代码”放在网上。 所以这是一些糟糕的代码。 ;) 序言 (The Preamble ) While I've been working as an engineer for 25 years this year, I didn't graduate f...
yolov3-tiny.conv.15
07-13
总的来说，`yolov3-tiny.conv.15`是YOLOv3-Tiny模型在PyTorch中的一个重要组成部分，它包含了网络部分层的预训练权重，是模型能够快速应用于实际检测任务的关键。理解和掌握这一权重文件的使用，对于深入理解和实践...
yolov3-tiny.weights.tar.gz
05-09
但是，由于YOLOv3-Tiny的权重文件格式可能与`torchvision`不完全兼容，因此通常需要自定义模型结构，并从`yolov3-tiny.weights`文件加载权重。这个`.tar.gz`压缩包中的`yolov3-tiny.weights`文件就是预先训练好的...
yolov3-tiny.weights
07-13
pytorch yolov3 目标检测 yolov3-tiny.weights https://pjreddie.com/media/files/yolov3-tiny.weights yolov3 yolov3-tiny.weights
Tiny Box-开源
05-01
Tiny Box是完全使用lua代码编写的免费Direct Connect服务器，它基于可从http://luaaio.luaforge.net/获得的Lua AIO发行版。
vue-tinybox-小巧（仅压缩后的2.5 KB）且光滑的灯箱图库。 针对台式机和移动设备进行了优化。-Vue.js开发
05-27
vue-tinybox Vue.js Slick的一个精巧却很小的灯箱画廊。 没有过多的设计。 图片，缩略图，控件。 微小的。 无依赖关系。 少于vue-tinybox一个Vue.js Slick的光滑但很小的灯箱画廊。 没有过多的设计。 图片，缩略图，控件。 微小的。 无依赖关系。 缩小并压缩后不到3 KB。 适应性强。 在计算机上工作。 适用于平板电脑。 可在手机上使用。 演示在此处观看实时演示：os.karamoff.dev/vue-tinybox基本用法 安装浏览器在以下位置包含指向Tinybox的链接
Tiny Box
10-24
Tiny Box
tinybox demo
04-11
tinybox demo
tinybox JS网页高亮弹出框插件
05-18
摘要:脚本资源,jQuery,tinybox,lightbox,高亮弹出框　　JS网页高亮框插件，一个使用jquery实现的高亮弹出框插件tinybox，可以实现文字、图片、普通html内容的高亮弹出显示，可以设置弹出框自动关闭时间，可以通过ajax调用，目前应用十分广泛，从功能方面来说，类似于lightbox。
轻量级的 JavaScript 弹出框脚本：TinyBox
Just Code
05-12 385
ThickBox 是一个基于 JQuery 类库的扩展，它能在浏览器界面上显示非常棒的弹出框，它可以显示单图片，多图片，AJAX 请求内容或链接内容。 要使用 ThickBox，需要下载三个文件： JS 文件：thickbox.js 或者压缩版本 thickbox-compressed.js。 CSS 文件：ThickBox.css 最后一个 Loading 图片：loadi...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值