Как закрыть модальное окно спустя 5 секунд после успешной отправки с cf7?
Подскажите
есть форма на cf7
есть модальное окно
открывается по клику на элемент с классом .openm
закрывается по клику на класс '.mclose
$(function() { var openm = $('.openm'); var overlay = $('.overlay'); var modal = $('.modal'); var mclose = $('.mclose'); openm.click(function() { overlay.toggleClass('overlay-active'); modal.toggleClass('modal-active'); }); }); |
$(function() { var openm = $('.openm'); var overlay = $('.overlay'); var modal = $('.modal'); var mclose = $('.mclose'); openm.click(function() { overlay.toggleClass('overlay-active'); modal.toggleClass('modal-active'); }); });
<div class="overlay"></div> <div class="modal"> ФОРМА <a class="mclose"></a> </div> |
<div class="overlay"></div> <div class="modal"> ФОРМА <a class="mclose"></a> </div>
Нужно, что бы после успешной отправки это модальное окно и overlay само закрылось
Спасибо
Дополнительно:
Stalker_RED @Stalker_RED setTimeout(myFunc, 5000)
5000 миллисекунд = 5 сек
вместо myFunc - ваша функция, которая закроет модалку.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для Contact Form 7 не нужно пытаться угадывать момент отправки по клику на кнопку. У плагина есть свои JavaScript-события, и для вашей задачи подходит wpcf7mailsent. Оно срабатывает только после успешной отправки письма. Если использовать wpcf7submit, модальное окно будет закрываться и при ошибках валидации, например когда пользователь не заполнил обязательное поле. Поэтому правильная логика такая: открываем модалку по клику, закрываем вручную по .mclose или overlay, а после события wpcf7mailsent запускаем setTimeout на 5000 миллисекунд и снимаем активные классы.
Для одной модалки на странице можно использовать такой вариант:
jQuery(function ($) { const overlay = $('.overlay'); const modal = $('.modal'); $('.openm').on('click', function (event) { event.preventDefault(); overlay.addClass('overlay-active'); modal.addClass('modal-active'); }); $('.mclose, .overlay').on('click', function (event) { event.preventDefault(); overlay.removeClass('overlay-active'); modal.removeClass('modal-active'); }); document.addEventListener('wpcf7mailsent', function () { setTimeout(function () { overlay.removeClass('overlay-active'); modal.removeClass('modal-active'); }, 5000); }, false); });jQuery(function ($) { const overlay = $('.overlay'); const modal = $('.modal'); $('.openm').on('click', function (event) { event.preventDefault(); overlay.addClass('overlay-active'); modal.addClass('modal-active'); }); $('.mclose, .overlay').on('click', function (event) { event.preventDefault(); overlay.removeClass('overlay-active'); modal.removeClass('modal-active'); }); document.addEventListener('wpcf7mailsent', function () { setTimeout(function () { overlay.removeClass('overlay-active'); modal.removeClass('modal-active'); }, 5000); }, false); });
Если на странице может быть несколько форм или несколько модальных окон, лучше закрывать не первую найденную .modal, а именно ту модалку, внутри которой находится отправленная форма. В событии Contact Form 7 есть event.target, это DOM-элемент формы. От него можно подняться до ближайшего родителя .modal и закрыть его:
document.addEventListener('wpcf7mailsent', function (event) { const form = event.target; const modal = form.closest('.modal'); if (!modal) { return; } setTimeout(function () { modal.classList.remove('modal-active'); const overlay = document.querySelector('.overlay'); if (overlay) { overlay.classList.remove('overlay-active'); } }, 5000); }, false);document.addEventListener('wpcf7mailsent', function (event) { const form = event.target; const modal = form.closest('.modal'); if (!modal) { return; } setTimeout(function () { modal.classList.remove('modal-active'); const overlay = document.querySelector('.overlay'); if (overlay) { overlay.classList.remove('overlay-active'); } }, 5000); }, false);
Использовать toggleClass для открытия и закрытия в такой задаче нежелательно. При повторных кликах состояние может стать неожиданным: один клик открыл, второй случайный клик закрыл, а обработчик успешной отправки потом снова меняет классы не так, как ожидается. Для открытия лучше явно добавлять классы через addClass, для закрытия явно удалять через removeClass. Так код становится предсказуемым.