主页 / 问题 / 1527611
Accepted
Pavel
Asked:2023-06-26 19:28:38 +0000 UTC2023-06-26 19:28:38 +0000 UTC

如何在成功提交表单后打开 Fancybox 模式窗口？

  • 772

如何在成功提交表单后打开 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

1 个回答

  1. Best Answer

    您可以将 $.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确定在模式窗口中显示的内容类型。我使用了 type inline，这意味着内容位于页面上，而不是从另一个网址加载。此选项允许您使用各种 HTML 元素（例如隐藏框）作为模式的内容。

    • 1

相关问题