Одна анимация для всех pop-up как?

Question

[freeman0204]

https://codepen.io/freeman0204/pen/NapeRe есть несколько pop-up(сам делал) они расположены в разных частях сайта и у них разные родители. Нужно сделать так что бы не обращаться к каждому pop-up поп id что бы закрыть его или открыть. Как написать один скрипт для всех? У меня то работает но нужно код копировать один и тот же.

Answer 1

[SuperToster]

Можно и несколько попапов на одной странице. Обращаться к ним с помощью дата атрибута.

.popup {
  display:none
}

$(document).ready(function() {
  $(".js-popup-trigger").click(function() {
    $($(this).data("target")).css({
      "display": "block"
    });
  });
});

<button class="js-popup-trigger" data-target=".js-popup-one">call #1</button>
<button class="js-popup-trigger" data-target=".js-popup-two">call #2</button>
<button class="js-popup-trigger" data-target=".js-popup-three">call #3</button>

<div class="popup js-popup-one">popup #1</div>
<div class="popup js-popup-two">popup #2</div>
<div class="popup js-popup-three">popup #3</div>

Comments

[freeman0204]

А если нужно закрыть окно? Не все за раз а именно то на которое нажал. У меня это <div class="close"></div>

[Сергей Меньщиков]

freeman0204, По такому же принципу как вам дали код.
У каждой кнопки closeдолжен быть свой дата-таргет - например data-target=".js-popup-one"

И потом обработчик

$(".close").click(function() {
    $($(this).data("target")).css({
      "display": "none"
    });