0

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>

1 ответ 1

1

Не работает всё это, потому что дело происходит так:

  1. Оверлей имеет display:none и не отображается вместе с вложенными в него элементами.
  2. После нажатия на ссылку оверлею присваивается display:block.
  3. После скрытия элемента и оверлей, и попап получают display:none.
  4. При повторном нажатии у оверлея становится стиль display:block, а у попапа так и остаётся none.

В общем, советую заглянуть в консоль разработчика и посмотреть, что там творится.

Чтобы это работало, советую вам показывать так же, как и скрывали:

$(".js-popup-trigger").on('click', function(e){
            e.preventDefault();
            $($(this).data("target")).css({
                "display" : "block"
            });
            $($(this).data("target")).children(".pop-up").css({
                "display" : "block",
                "top" : "50%"
            });
        });
    
    $(".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>

Выглядит не очень красиво, но у меня не так много времени, и советов по структуре я не дам.

1
  • Спасибо, главное что работает. Дальше буду думать. 27 сен 2017 в 20:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.