码迷,mamicode.com
首页 > 其他好文 > 详细

小小的弹出框

时间:2016-12-12 14:42:57      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:closed   tom   htm   script   animate   cti   html   show   pac   

只要在需要的div 上加 onclick=showDiv(‘#popPic‘);就可以了
 
html
<div id="popBox">
    <div class="popCont">
        <a class="closed">关闭</a>
    </div>
</div>

 

css
body{position: relative;}
#popBox{position: absolute;left: 0;top:0;right: 0;bottom: 0;background: rgba(0,0,0,.5);z-index: 500;display: none;}
.popCont{position: fixed;width: 530px;height: 450px;background: #fff;}
.closed{position: absolute;right: 0;top:0;}

 

js
<script>
function showDiv(sId){
    var getId=$(sId);
    getId.height($(‘body‘).height());
    getId.stop(true,true).show().stop(true,true).animate({opacity:‘1‘},200);
    var firstDiv=getId.find(‘div:first‘);
    var h=firstDiv.height();
    var w=firstDiv.width();
    firstDiv.css({
        ‘position‘:‘fixed‘,
        ‘left‘:‘50%‘,
        ‘top‘:‘50%‘,
        ‘margin-top‘:-h/2+‘px‘,
        ‘margin-left‘:-w/2+‘px‘
    })
    firstDiv.click(function(e){
        e.stopPropagation();
    });
    getId.click(function(){
        $(this).stop(true,true).hide().stop(true,true).animate({opacity:‘0‘},200);
    });
    $(‘.closed‘).click(function(){
        getId.stop(true,true).hide().stop(true,true).animate({opacity:‘0‘},200);
    });
}
</script>

 

小小的弹出框

标签:closed   tom   htm   script   animate   cti   html   show   pac   

原文地址:http://www.cnblogs.com/lifecandy/p/6164096.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!