小小的弹出框
只要在需要的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;}
js
$('.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);
}
我只是个爱前端的姑娘