Подскажите, пожалуйста, почему не работает добавление класса для секции(2 строчки в конце javascript)?
HTML Секции:
<section class="modal" id="modal">
<div class="container">
<div id="wrapper-modal">
<div id="overlay"></div>
<div id="modal-window">
<div class="modal__content">
<h3 class="modal__title">
Заказ принят!
</h3>
<p class="modal__text">
Мы скоро свяжемся с вами, чтобы обсудить детали. Ожидайте!
</p>
<div>
<button id="btn-close">Супер! Жду!</button>
</div>
</div>
</div>
</div>
</div>
</section>
JavaScript:
(function ($) {
$(".contact-form").submit(function (event) {
event.preventDefault();
// Сохраняем в переменную form id текущей формы, на которой сработало событие submit
let form = $('#' + $(this).attr('id'))[0];
// Сохраняем в переменную класс с параграфом для вывода сообщений
let message = $(this).find(".main__form_first");
let fd = new FormData(form);
$.ajax({
url: "/telegramform/php/send-message-to-telegram.php",
type: "POST",
data: fd,
processData: false,
contentType: false,
success: function success(res) {
let respond = $.parseJSON(res);
if (respond.err) {
message.html(respond.err).css('color', '#d42121');
setTimeout(() => {
message.text('');
}, 3000);
} else if (respond.okSend) {
message.html(respond.okSend).css('color', '#21d4bb');
setTimeout(() => {
message.text('');
}, 3000);
} else {
alert('Необработанная ошибка. Проверьте консоль и устраните.');
}
},
});
});
}(jQuery));
document.querySelector('.header__btn').addEventListener('click', () => {
document.querySelector('.modal').classList.toggle('active');
});