Как сделать чтобы при успешной отправке формы срабатывало открытие модального окна Fancybox?

Question

Как сделать чтобы при успешной отправке формы срабатывало открытие модального окна Fancybox?

Рейтинг: 0Ответов: 1Опубликовано: 26.06.2023

Как сделать чтобы при успешной отправке формы срабатывало открытие модального окна Fancybox? У меня сейчас форма закрывается. Но как можно сделать, чтобы выходило модальное окно. Буду рад любой помощи

   document.getElementById('call-form2').addEventListener("submit", function(event) {
  event.preventDefault(); // Предотвращаем отправку формы по умолчанию
  const formDataCall = new FormData(document.getElementById('call-form2'));
// Отправляем данные на сервер с помощью Fetch API
  fetch("/", {
    method: "POST",
    body: formDataCall 
  })
  .then(function(response) {
    if (response.ok) {
      document.getElementById('call-form2').reset();
      $.fancybox.close(); // Закрываем текущий fancybox
    }
  })
  .catch(function(error) {
    console.error("Ошибка:", error);
    
  });
});

javascript fancybox

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Вы можете заменить $.fancybox.close() следующим образом:

.then(function(response) {
    if (response.ok) {
      document.getElementById('call-form2').reset();
      $.fancybox.open({
        src: '#success-modal', // селектор модального окна
        type: 'inline', // тип содержимого - inline
      });
    }
 })

То есть здесь, после успешной отправки формы, вызывается метод $.fancybox.open(), который открывает новый FancyBox.

Итак, в коде, который я предложил, после успешной отправки формы будет запускаться функция then, которая будет выполняться только в том случае, если ответ от сервера получен без ошибок.

Внутри этой функции будет вызываться метод $.fancybox.open(), который позволяет открыть новое модальное окно. У этого метода есть различные параметры для настройки. В данном случае я использовал параметры src и type.

Параметр src указывает на местоположение контента, который нужно показать в модальном окне. В данном случае я указал селектор #success-modal, который должен соответствовать модальному окну, которое вы хотите открыть. Вы можете поменять этот селектор на свой.

Параметр type определяет тип контента, который вы отображаете в модальном окне. Я использовал тип inline, что означает, что контент находится на странице, а не загружается с другого URL-адреса. Эта опция позволяет использовать различные элементы HTML, например, скрытые блоки, как контент для модального окна.

Как сделать чтобы при успешной отправке формы срабатывало открытие модального окна Fancybox?

Ответы