https://codepen.io/freeman0204/pen/BwWgeY
Подскажите, что не так с кодом jquery? При втором нажатии на одну и ту же ссылку появляется только overlay, самого окна нет. Правильно ли я создал структуру и стили для pop-up? Мне нужно сделать так, чтобы все нормально работало и при этом я смог задавать анимацию открытия и закрытия pop-up. Сейчас почти все работает. Но нужно поправить момент, о котором говорил выше. Как это сделать?
$(".js-popup-trigger").on('click', function(e){
e.preventDefault();
$($(this).data("target")).css({
"display" : "block"
});
});
$(".close").on('click', function(){
$(this).parent().animate({
top : -200,
opacity : 'toggle'
}, 500);
$(this).parents('.overlay').animate({
opacity : 'toggle'
}, 500);
});
.overlay {
display: none;
position: fixed;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 9999;
left: 0;
top: 0;
}
.overlay .pop-up {
font-family: circe-light;
max-width: 420px;
width: 100%;
background-color: #ffffff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 10px;
padding: 43px;
}
.overlay .pop-up .close {
position: absolute;
right: 20px;
top: 20px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAABDElEQVQ4T5XUyxGCMBAG4I0HHOFiCVqBloAdhEo840W4yNVOTAdSglagJXhBRw/ghkcGQh6EW4bJN7ubPyGAX0GzxIfvmbDkxdcuX0WT5Rvm+4DFKeEQbj4CVDcffjsXsIG8KwDZopGSVs5xsXEBJeiOnYWEt+QKKiEcUY25gDqIGwKbApqgEWYCbZASU4EzIFEJ1aU9tWbYihgN2uzna3go4o8W0lbWbf3QbFUCPLr1DGC9YPFTF2pLZSKQ3Zkbg63E5GFjRRQrZLZgjzDdqU0JtiJnorXRsG2gdAP00JSb0rubdsgGtq/GdMgIFvREMdmYbjAGUpUtaYZR3SYH8WHMXR7GYYVeGLAD+wOttQRILcfz3AAAAABJRU5ErkJggg==") no-repeat;
width: 19px;
height: 19px;
transition: .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay js-popup-one">
<div class="pop-up text-center">
<div class="close"></div>
<h3>Окно 1</h3>
</div>
</div>
<div class="overlay js-popup-two">
<div class="pop-up text-center">
<div class="close"></div>
<h3>Окно 2</h3>
</div>
</div>
<a href="" class="js-popup-trigger" data-target=".js-popup-one">Ссылка для открытия окна 1</a>
<a href="" class="js-popup-trigger" data-target=".js-popup-two">Ссылка для открытия окна 2</a>