Метод отрабатывает один раз, приходится перезагружать страницу чтобы работало сново, почему?

Question

[neznaiaka]

Есть кнопка, при нажатии на которую присваивается класс с display block, работает только один раз, потом приходится перезагружать страницу, чтобы снова нажималось, в чем причина?

<div class="popup-window" id="popup">
                   <p class="poup-text">
                     Извините, онлайн-запись на эту услугу еще не работает. Пожалуйста, свяжитесь с нами.
                   </p>
                   <form action="#">
                     <button class="pop-up-btn">Ясно</button>
                 </form>
                </div>

.popup-window{
   display: none;
   width: 600px;
   height: 200px;
   background: #fff;
   padding: 50px;
   text-align: center;
   position: absolute;
   z-index:10;
   bottom:150px;
   left: 500px;
}
.pop-up-btn{
   background: #000;
   color:#fff;
   padding: 10px 30px;
}
.poup-text{
   font-size: 16px;
   width: 400px;
   text-align: center;
   margin: 20px auto;
}
.active-2{
   display: block;
}
.no-active{
   display: none;
}

// при клике на  вызвать событие клик
   $('.btn-header').on('click', function () {
      // применить стиль класса active 
      $('.popup-window').toggleClass('active-2')
      return false
   });

         // при клике на вызвать событие клик
         $('.pop-up-btn').on('click', function () {
            // применить стиль класса active д
            $('.popup-window').toggleClass('no-active')
         });

Comments

[Steppp]

так toggleClass меняет класс!
return false - это зачем?

используй лучше addClass и removeClass

Или так, и все! Место тех 2х

// при клике на  вызвать событие клик
   $('.btn-header').on('click', function () {
      // применить стиль класса active 
      $('.popup-window').toggleClass('active-2')
      $('.popup-window').toggleClass('no-active')
   });

-----------------

Ну а по сути no-active класс не нужен! И получается этого кода достаточно будет

// при клике на  вызвать событие клик
   $('.btn-header').on('click', function () {
      // применить стиль класса active 
      $('.popup-window').toggleClass('active-2')
   });

[neznaiaka]

Steppp, спасиб)

// при клике на  вызвать событие клик
   $('.btn-header').on('click', function () {
      // применить стиль класса active 
      $('.popup-window').addClass('active-2')
   });

         // при клике на вызвать событие клик
         $('.pop-up-btn').on('click', function () {
            // применить стиль класса active д
            $('.popup-window').removeClass('active-2')
            
         });

[Steppp]

neznaiaka, А, все, я чет не увидел что к разным кнопкам разный код! Да, все верно у тебя)

[neznaiaka]

Steppp, напишите, я отмечу решением

Answer 1

[Steppp]

)))

$('.btn-header').on('click', function () {
    $('.popup-window').addClass('active-2')
 });

$('.pop-up-btn').on('click', function () {
  $('.popup-window').removeClass('active-2')
});