小小的弹出框

weixin_30587025

于 2016-12-12 13:16:00 发布

阅读量92

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lifecandy/p/6164096.html

只要在需要的div 上加 onclick=showDiv('#popPic');就可以了

html

<div onclick=showDiv('#popBox');> </div>

<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;}

$('.popBox').each(function(){
    var $this=$(this);
    var firstDiv=$this.find('.popCont');
    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();
    });
    $this.click(function(){
        $(this).stop(true,true).hide().stop(true,true).animate({opacity:'0'},200);
    });
    $('.closed').click(function(){
        $this.stop(true,true).hide().stop(true,true).animate({opacity:'0'},200);
    });
})
function showDiv(sId){
    var getId=$(sId);
    getId.height($('body').height());
    getId.stop(true,true).show().stop(true,true).animate({opacity:'1'},200);
}