好用弹出层

按钮：

模块：

<div class="filterbg"></div>
<div class="popup">
<a href="javascript:;" class="popupClose"></a>
<div class="summary" style="background-color: #009F95;">
　　内容放在这里
</div>
</div>

第二个个弹框

<div class="popup1">
<a href="javascript:;" class="popupClose"></a>
<div class="summary" style="">
　　1内容放在这里
</div>
</div>

js:

//打开第一个弹窗
$('.summaryBtn').on('click',function(){
$('.filterbg').show();
$('.popup').show();
$('.popup').width('3px');
$('.popup').animate({height: '76%'},400,function(){
$('.popup').animate({ '82%'},400);
});
setTimeout(summaryShow,800);
});

//打开第二个弹框

$('.summaryBtn1').on('click',function(){

$('.filterbg').show();
$('.popup1').show();
$('.popup1').width('3px');
$('.popup1').animate({height: '76%'},400,function(){
$('.popup1').animate({ '82%'},400);
});
setTimeout(summaryShow,800);
});

//关闭弹框
$('.popupClose').on('click',function(){
$('.popupClose').css('display','none');
$('.summary').hide();
$('.popup').animate({ '3px'},400,function(){
$('.popup').animate({height: 0},400);

$('.popup1').animate({ '3px'},400,function(){
$('.popup1').animate({height: 0},400);
});
setTimeout(summaryHide,800);
});

function summaryShow(){
$('.popupClose').css('display','block');
$('.summary').show();
};

function summaryHide(){
$('.filterbg').hide();
$('.popup').hide();
$('.popup').width(0);

$('.popup1').hide();
$('.popup1').width(0);
};

css:

.filterbg {
100%;
height: 100%;
background: rgba(30, 182, 254, 0.5);
position: absolute;
top: 0;
left: 0;
z-index: 998;
display: none;
}

.popup，.popup1 {
0;
height: 0;
background: #061f3e;
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
border-radius: 8px;
display: none;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.popupClose {
display: block;
44px;
height: 44px;
background: url(../images/s_ico3.png);
background-size: 100 100%;
position: absolute;
top: -22px;
right: -22px;
display: none;
transition: 0.3s;
}

.popupClose:hover {
transform: rotate(180deg);
}

.summary {
96%;
height: 92%;
margin: 2% auto;
display: none;
}