Почему не закрывается модальное окно при повторном нажатии на кнопку?

Question

[Dmitriy]

<button class="modal2-window__btn">Нажми</button>
<div class="modal2">
    <button class="modal2__btn">x</button>
</div>

$('.modal2-window__btn').click(function () {
  $('.modal2').toggleClass('active');
});

$('.modal2__btn').click(function () {
  $(this).parent().removeClass('active');
});


// Убираем модальное окно при клике на другую область
$(document).mouseup(function (e) { // событие клика по веб-документу
  var div = $('.modal2'); // тут указываем класс элемента
  if (!div.is(e.target) // если клик был не по нашему блоку
      && div.has(e.target).length === 0) { // и не по его дочерним элементам
      $('.modal2').removeClass('active');
  }
});

Comments

[Ankhena]

Потому что она входит в "Убираем модальное окно при клике на другую область".
Убралось и тут же открылось обратно.

[Dmitriy]

Ankhena, а как такое исправить?

[Ankhena]

Dmitriy, например, записать в зону исключения и кнопку тоже, а не только саму модалку.

[Dmitriy]

Ankhena, извини, но что для этого нужно прописать?

[Alfieros]

Если вам нужно просто убрать его по клику в другую область, а не вызывать по новой. Смените toggleClass на removeClass. Так же саму кнопку закрытия можно через запятую добавить в первую функцию.

[Dmitriy]

Alfieros, ну toggleclass используется у меня для того чтобы он мог закрыться при повторном нажатии на кнопку. При первом же нажатии модальное окно показывается

[Ankhena]

Dmitriy, var div = $('.modal2, .modal2-window__btn');

[Alfieros]

Dmitriy, вообще есть для таких вещей очень хорошая штука, как magnificPopup. Тогда можно делать кучу модалок и не париться. Всё предельно просто работает. Вот пример с моего сайта, где один скрипт отрабатывает модалку логина и корзины по такой же схеме, как хочешь ты.

$(document).on('#addToCard', function(e) {
        setTimeout(function() {
            var target = $('#addToCart'); // id кнопки корзины
// Ниже свойства для модалки
            target.magnificPopup({
                closeOnBgClick: true,
                showCloseBtn: true,
                items: {
                    src: "#card_popup",
                    type: 'inline'
                }
            }).magnificPopup('open');
        }, 500);
        e.preventDefault();
    });

// Классы кнопок для открытия модальных окон, которые нужно отображать.
    $('.popup_link, .popup_login').magnificPopup();

// Одна кнопка закрытия для всех модалок.
    $('.close_popup').click(function() {
        $.magnificPopup.close();
    })

[Dmitriy]

Ankhena, Огромное спасибо, заработало. Очень благодарен