Два события (попап) на одном клике

Question

Прошу помочь. Суть такая есть два модальных окна, и гиф. На гиф добавил два класса для вызова modal, при нажатии на гиф 1 раз, должно появляться первое модальное окно, после ты его закрываешь и нажимаешь на гиф второй раз, при нажатии второй раз, должно появляться только второе. Я неопытный, вот попробовал что-то накидать но получилось наполовину, при первом клике появляется окно 1, при втором клике появляется сразу 2 окна и первое и второе, а должно только второе. Понимаю что скорее всего сделал не правильно, и не могу понять в чем, подскажите пожалуйста В CSS стоит display:none;

HTML Modala

<pre>
  <div class="modal1">
    <div class="modal__body">
      <div class="modal__content">
        <h2 class="modal__title">Title1</h2>
        <a  class="modal__close" href="#">X</a>  
      </div>
    </div>
  </div>
  <div class="modal2">
    <div class="modal__body">
      <div class="modal__content">
        <h2 class="modal__title">Title2</h2>
        <a  class="modal__close" href="?">X</a>  
      </div>
    </div>
  </div>
</pre>

Jquery

let numOfClicks = 0;
  const $elem = $(".gifka");
  $elem.on('click', () => {
    ++numOfClicks;
    if(numOfClicks % 2 !== 0 ) fadeIn('$.modal1');
    else $('.modal2');
});

Answer 1

Добавил класс close для закрытия при клике на крестик.

Оставил твои вариант выполнения, только подправил некоторые моменты.

$( selector ).fadeIn - вот так используется, и тебя так fadeIn('$.modal1')

Добавил фигурные скобки для легкого восприятия. event.preventDefault() для отмены перехода по ссылке

let numOfClicks = 0;
const $elem = $(".gifka");
$elem.on('click', () => {
  ++numOfClicks;
  if (numOfClicks % 2 !== 0) {
    $('.modal1').fadeIn()
  } else $('.modal2').fadeIn();
});
$('.modal__close').on('click', function(event) {
  event.preventDefault()
  $('.close').fadeOut()
})

.modal1,
.modal2 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="gifka">
  item click
</div>

<div class="modal1 close">
  <div class="modal__body">
    <div class="modal__content">
      <h2 class="modal__title">Title1</h2>
      <a class="modal__close" href="#">X</a>
    </div>
  </div>
</div>
<div class="modal2 close">
  <div class="modal__body">
    <div class="modal__content">
      <h2 class="modal__title">Title2</h2>
      <a class="modal__close" href="?">X</a>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Два события (попап) на одном клике

Ответы (1 шт):