Как закрыть модальное окно спустя 5 секунд после успешной отправки с cf7?

Ссылка скопирована
1 ответ

Подскажите
есть форма на 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 само закрылось

Спасибо

Дополнительно:

Как закрыть модальное окно спустя 5 секунд после успешной отправки с cf7?

Stalker_RED @Stalker_RED setTimeout(myFunc, 5000)
5000 миллисекунд = 5 сек
вместо myFunc - ваша функция, которая закроет модалку.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Игорь NetOps Ответ

Для 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. Так код становится предсказуемым.

  • Для успешной отправки CF7 используйте событие wpcf7mailsent.
  • Пять секунд задаются как 5000 в setTimeout.
  • Закрывайте модалку удалением классов modal-active и overlay-active.
  • Если форм несколько, ищите ближайшую .modal через form.closest('.modal').
  • Не закрывайте окно по wpcf7submit, если нужно ждать именно успешную отправку.
Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно