закрытие модального окна после отправки формы

Как закрыть модальное окно после отправки AjaxForm

Комментарии: 33

попробуй в кнопку добавить onclick=«closeWindow()

Добавлен вызов jQuery события af_complete после отправки формы. Теперь вы можете что-то делать с ответом от сервера:

в вашем случае это будет выглядеть так

Не получилось(
Добавил перед вызовом

Форма отправляется, но модальное окно остается на месте — как быть?
Заранее большое спасибо!

Вообще модальное окно с формой у меня вот так вызывается:

Я попробовал добавить id непосредственно в форму вот так:

Теперь получается, что исчезает кусок формы (id=«cbf») и происходит это вне зависимости правильно заполнена форма или с ошибками.

Теперь получается, что исчезает кусок формы (id=«cbf») и происходит это вне зависимости правильно заполнена форма или с ошибками.

НО! теперь форма исчезает, но остается затемнение экрана, которое возникает при вызове формы:)
Использую стандартный bootstrap — может кто подскажет, как и от него еще избавиться?:)
Заранее спасибо!

Источник

Закрыть Bootstrap Modal в форме отправки

10 ответов

используйте этот код

добавьте тот же атрибут, что и на кнопке закрытия:

вы также можете использовать jQuery, если вы хотите:

дайте id для отправки кнопки

Также вы забыли закрыть последний div.

надеюсь, что это помогает.

Вы можете использовать один из этих двух вариантов:

1) Добавить данные-отклонить кнопку отправки, т. е.

2) Сделайте это в JS, как

Я делаю этот код, он работает нормально, но как только форма отправить модель кнопка не открыть модель снова сказать e.preventdefault не является функцией..

используйте код ниже для любого события, которое срабатывает в форме отправки

вы можете сделать этот код более коротким..

если какое-либо тело нашло решение для e.preventdefault дайте нам знать

вместо этого я визуализировал частичное, содержащее модалы снова после успеха ajax (я использую ruby on rails). Мне также пришлось удалить «modal-open» класс из тега body тоже. Это в основном сбрасывает глагола. Я думаю, что-то подобное, с обратным вызовом при успешном запросе ajax для удаления и добавления модалов должно работать в другом рамки тоже.

Если ваш модальный имеет кнопку отмены (в противном случае создайте скрытую кнопку закрытия). Вы можете имитировать событие click на этой кнопке, чтобы ваша форма была закрыта. Iin ваш компонент добавить ViewChild

в кнопку закрытия добавить #fileInput

когда вы хотите закрыть модальный программно вызвать событие click на кнопке close

перечисленные ответы не будут работать, если результаты отправки формы AJAX влияют на HTML вне области модального до закрытия модального. В моем случае результатом был серый экран (fade), где я мог видеть обновление страницы, но не мог взаимодействовать ни с одним из элементов страницы.

Примечание: моя модальная форма была внутри родительского div, который уже был визуализирован через AJAX, таким образом, необходимость привязать прослушиватель событий к документ.

Источник

Модальное окно для сайта на чистом CSS и JavaScript

В этой статье познакомимся со скриптом, предназначенным для динамического создания модальных окон на сайте. Разберём из чего он состоит, как его подключить и использовать.

Что такое модальное окно

При этом показ окна обычно сопровождают затемнением всей другой части страницы. Это действие позволяет визуально отделить его от остального содержимого страницы, а также показать, что в данный момент только оно одно является активным элементом. При этом контент, расположенный под ним, делают недоступным (т.е. пользователь не сможет с ним взаимодействовать пока он не закроет это окно).

Вызов модального окна можно привязать к различным событиям на странице, но в большинстве сценариев это осуществляют при нажатии на кнопку или ссылку.

Изображение модального окна:

Оно состоит из заголовка (хедера), основной части и футера.

В заголовке обычно выводят название окна и элемент, с помощью которого его можно закрыть. В основной части распологают содержимое, а в футере кнопки для выполнения различных действий.

Загрузка и установка модального окна

Проект модального окна расположен на GitHub. Перейти к нему можно по этой ссылке.

Процесс установки модального окна на страницу выполняется посредством подключения к ней его CSS и JavaScript файлов, или добавления их содержимого в соответствующие свои файлы.

Как создать и вызвать модальное окно

При создании окна вы можете сразу же его настроить, для этого в данную функцию необходимо передать данные в формате объекта. Осуществляется это с помощью соответствующих ключей (свойств). Например, с помощью ключа title вы можете задать заголовок, который будет иметь всплывающее окно по умолчанию. Ключ content позволяет установить содержимое, а footerButtons – кнопки для отображения их в его нижней части (футере).

Пример кода, выполняющего создание модального окна без кнопок в нижней части, с заголовком «Новое сообщение» и пустым содержимым:

Пример создания модального окна с настройками по умолчанию:

Этот код создаст модальное окно без футера, с пустым содержимым и заголовком «Новое окно».

В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:

Эти методы предназначены для взаимодействия с созданным окном. Они позволяют его открыть, закрыть, изменить ему контент и др.

Рассмотрим, как работать с этими методами на примерах.

Например, метод show используется когда вам необходимо показать (открыть) модальное окно:

Метод hide применяется для его скрытия:

Методы setContent и setTitle предназначены соответственно для изменения контента и заголовка модального окна после его создания.

Данную операцию имеет смысл использовать только в том случае, если созданное модальное окно вам больше не нужно на странице.

Примеры использования скрипта для создания модальных окон

1. Пример кода, выполняющий открытие модального окна при нажатии на определённую кнопку.

2. Пример кода, позволяющий открыть одно и тоже модальное окно посредством клика на разные элементы (определяется элемент, который может открыть это окно, с помощью наличия у него атрибута data-toggle=»modal» ):

3. Пример, в котором заголовок и содержимое модального окна определяется посредством значений data-атрибутов элемента, с помощью которого оно вызывается:

4. В этом примере показано как можно в обработчике события «click» для кнопки, расположенной в футере модального окна, получить элемент, посредством которого оно было открыто:

5. Пример, в котором создано 2 разных модальных окна. Первое модальное окно открывается при нажатии на одни элементы, а второе – при клике на другие:

6. Пример всплывающего окна, данные в которое загружаются с использованием AJAX:

Пример содержимого файла «json-1»:

7. Этот пример содержит код для обработки различных событий, связанных с модальном окном и кнопками, расположенными в нём:

Описание скрипта модального окна

В этом разделе приведена информация для тех, кто хочет более подробно разобраться с тем, как работает это модальное окно.

Переменная _animationSpeed используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).

Функция _showModal предназначена для включения отображения модального окна на странице, а _hideModal – для его скрытия.

Функция _handlerCloseModal используется в качестве обработчика события «click» для документа и выполняет скрытие модального окна при нажатии на кнопку его закрытия или вне его.

Источник

Делаем модальные окна для сайта. Заботимся об удобстве и доступности

Я занимаюсь вёрсткой и программированием сайтов. Почти в каждом макете, который я верстал, были модальные окна. Обычно это формы заказа звонка в лендингах, уведомления о завершении каких-то процессов, или сообщения об ошибках.

Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.

В итоге было задумано сделать собственное простое решение.

Вообще говоря, есть несколько готовых скриптов, JavaScript библиотек, реализующих функционал модальных окон, например:

(в статье не рассматриваем решения на базе Frontend-фреймворков)

Несколькими из них я пользовался сам, но почти у всех находил какие-то недостатки. Некоторые из них требуют подключения библиотеки jQuery, которая есть не на всех проектах. Для разработки своего решения, нужно сначала определиться с требованиями.

Что мы ждём от модальных окон? Отвечая на этот вопрос, я основывался на докладе «Знакомьтесь, модальное окно» Анны Селезнёвой, а так-же на относительно старой статье NikoX «arcticModal — jQuery-плагин для модальных окон».

Итак, чтобы нам хотелось видеть?

Дисклеймер: Прежде чем мы рассмотрим подробности, сразу дам ссылку на готовый код получившейся библиотеки (HystModal) на GitHub, а также ссылку на демо+документацию.

1. Разметка HTML и CSS

1.1. Каркас модальных окон

Как открыть окно быстро? Самое простое решение: разместить всю разметку модального окна сразу в HTML странице. Затем скрывать/показывать это окно при помощи переключения классов CSS.

Набросаем такую разметку HTML (я назвал этот скрипт «hystmodal»):

Источник

Действия после успешной отправки формы CF7

Метод, использующий on_sent_ok hook, больше не рекомендуется.
Эта функция будет отменена к концу 2017 года.

Если форма расположена просто на странице, тогда там все понятно — там появляются сообщения об ошибках и сообщение после успешной отправки сообщения сразу под формой.

Рассмотрим, как можно изменить уведомления об отправке формы, или какие события можно добавить после отправки формы (редирект, сообщение об успешной доставке, скачивание файла).

Так же рассмотрим, какие могут быть интересные варианты событий после отправки формы CF7 в pop-up окне, то есть во всплывающем окне. Как сделать такую форму, я описывал в статье Как сделать форму обратной связи во всплывающем окне для WordPress.

Список пользовательских DOM событий для Contact Form 7

Обработчик событий wpcf7submit

Приведенный ниже код представляет собой простой пример регистрации обработчика событий. В этом примере функция прослушивает wpcf7submit событие и просто выдает предупреждение, когда событие происходит.

Поскольку все wpcf7* события всплывают через дерево DOM к корню документа, если вам не нужно устанавливать конкретную цель события, вы можете упростить ее, установив document свойство в качестве цели события:

Данные, вводимые пользователем через нужную контактную форму, передаются в обработчик события как detail.inputs свойство объекта события. Структура данных detail.inputs является массивом объектов, и каждый объект имеет name и value свойство.

Это пример доступа к введенному пользователем значению через поле «your-name»:

Существуют также другие свойства объекта события, которые вы можете использовать в своем обработчике событий.

Например, если вы хотите сделать что-то только с определенной контактной формой (ID = 123), используйте detail.contactFormId свойство, как показано ниже:

Выводим поп-ап окно «Спасибо за заказ» после успешной отправки сообщения

Например, такой скрипт для открытия модального окна с id=»popup-success» после успешной отправки формы:

Этот код всплывающего окна можно разместить где угодно, хоть в футере, хоть под формой, основной плюс в том, что это окно могут вызывать любые другие формы и не нужно делать под каждую форму отдельные попапы.

Для кнопки «Закрыть окно» добавляем такой код в файл скриптов:

Если у вас несколько форм, тогда для каждого ID формы можно создавать свои события:

id — это номер формы
$.magnificPopup.open — в данном примере используется Magnific Popup

Создаем событие для конкретной формы после успешной отправки сообщения (используем обычный Easy Fancybox)

У многих возникают сложности с данным моментом, поэтому решил его все же вынести в статью.

Данный скрипт выведет на экран окно id=’popup-success’ после успешной отправки одной из форм (id == 17754 или 17758 или 17757):

Простой разбор кода

id == 17754 || 17758 || 17757 — окно будет показываться только для этих форм (или-или).

Окно с сообщением об успешной отправке (можно добавить его в код, или лучше в виджет футера например, если шаблон не хочется изменять, или еще 100 вариантов):

Если скрипт вы добавляете не в файл скриптов, а в футер или редактор js-кода, тогда оберните его в данный код:

Как сделать скачивание файла pdf после заполнения формы c помощью плагина Contact Form 7

Открываем pdf-файл сразу на этой же странице

Открываем pdf на новой странице

Редирект на другую страницу после успешной отправки формы

Открыть новую страницу в новой вкладке после отправки формы:

Рекомендую к прочтению:

Комментарии (43) к “Действия после успешной отправки формы CF7”

Ирина

при этом само окно находится в блоке с
Подскажите, а где должен быть сам блок?

Denis Creative

Обновил немного статью — вот ссылка

Дмитрий

Есть кнопка с красивой всплывающей формой на странице я её скрываю «дисплей ноне» и хотелось бы что бы эта же форма всплывала после отправки формы нажатием кнопки отправки в сонтакт форм 7

Использую «Modal» из визуала композера, отличная вещь только нуждается каждый раз в доработке 🙁

Сергей

Denis Creative

Действительно, статью перепишу.
Теперь нужно использовать скрипт:

vadim

куда вставить этот скрипт чтобы после заполнения формы отправлялся файл?

Denis Creative

Или в основной скрипт, который использует шаблон, или в футер.

Вячеслав

Здравствуйте! Подскажите пожалуйста, а как вставить окно из плагина Easy Modal? Вроде все варианты перепробовал, не выходит.

Владимир

Здравствуйте.
Подскажите пожалуйста, как для данного скрипта:

михаил

здравствуйте! Отличная статья! подскажите а как сделать так, чтобы после успешной отправки. сначало открывалось благодарственное попап-окно..а через 5 секунд, включалось перенаправление на главную страницу

Назар

Больше не актуально т.к. on_sent_ok убрали из contact form 7

Denis Creative

во второй половине статьи есть эта информация

Дмитрий

Добрый день! Подскажите пожалуйста как реализовать скачивание фаила пользователем, после заполнения всех полей формы и нажатием кнопки «Скачать».

Дмитрий

Использую следующий скрипт для одной из форм:

ID формы прописано, файл скачивается. Но данный скрипт работает для всех форм на сайте а нужно только для определенной по ID!
Подскажите пожалуйста, как исправить?

Denis Creative

Надеюсь, вы уже решили эту проблему.
Если нет, то ответ в том, что location нужно было поместить внутрь условия if()

Андрей

on_sent_ok пишет — устаревший вид ввода, пишите на джава скрипте, что только не пробовал написать не появляется всплывающее окно после отправки

Denis Creative

Во второй половине статьи есть эта информация, и в комментариях выше.

Denis Creative

Обновил статью, найдёте решение внизу статьи.

Mihail

Как сделать, чтобы перенаправление после отправки письма происходило с задержкой?

Denis Creative

Бобсон

А как? подскажите, что прописать в setTimeout и где его ставить?

Denis Creative

только поменяйте 34560 на id своей формы.

Здравствуйте, подскажите что дописать чтобы скачивание файла или страничка открывались в отдельной вкладке

Denis Creative

Владимир

Никак не могу разобраться. Форма работает, но вот сделать закрывающееся окно никак не получается. Вставлял код в functions.php — ругается на ошибки, сайт висит. Ставлю код в main.js — тишина, вообще ничего не происходит.

мой код закрывающегося окна после отправки сообщения:

Denis Creative

Попробуйте такой код — он должен открывать окно с благодарностью после отправки сообщения (этот код нужно добавить в main.js):

При этом код самого окна должен быть примерно таким (обязательно id=»popup_msg» ) — этот код нужно добавить в свой html, footer.php или, если через админку, то в какой-то виджет в футере:

Владимир

Спасибо за ответ. С кодом разобрался. Взял пример из вашей другой статьи на эту тему. Мне нужно было чтоб окно с формой закрывалось после успешной отправки, взял этот пример:

разместил его в functions.php всё работает, но окно закрывается очень быстро, не видно сообщения об успешной отправке. Хочу сделать чтоб оно закрывалось через 4 секунды, пытаюсь вставить setTimeout 4000 но не пойму куда. Да я не программист, мне код сложно осваивать, пытаюсь разобраться.

Denis Creative

Владимир

Спасибо огромное! Куда я только её не пихал, эту setTimeout. Оказалось, надо ещё в одну функцию завернуть.

KoolPal

I am using this within the CF7 form. My form shortcode is [contact-form-7 title=»Contact Form Flat»]

document.addEventListener( ‘wpcf7mailsent’, function( event ) <
var > if ( 8 ) <
$.magnificPopup.open( <
items: <
src: ‘#popup_msg’
>,
type: ‘inline’
>, 0);
>
>, false );

However, this form is not closing after submission. Please guide me.

Здравствуйте, Денис. Пытаюсь сделать ссылку на скачивание файла после заполнения всех полей и нажатия на кнопку скачать.
Форма находится на отдельной странице.https://kitkraken.by/kupon-sea/
В дополнительные настройки прописываю:

document.addEventListener( ‘wpcf7mailsent’, function( event ) <
location = ‘https://kitkraken.by/wp-content/themes/plattform/inc/img/big.jpg’;
>, false );

Ничего не происходит. Письмо отправляется, но ссылка на скачивание (или автоматическое скачивание) не показывается.
Подскажите в чем ошибка? Спасибо

Denis Creative

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

Да, спасибо, Денис. Исправил (скрипт прописал в футере). Картинку я так просто поместил. Будет ПДФ-файл.

Денис, добрый день
Что-то не хочет в другой вкладке открываться.
Пишу

Denis Creative

https://. — там впишите нужный урл

Да, отлично. Спасибо, Денис.

Denis Creative

Денис, опять к Вам. Новая задача возникла. Вместо открытия файла, должно быть сразу скачивание без открытия.
Прописал

Ничего не происходит

Denis Creative

По моему, файлы pdf не скачиваются, попробуйте использовать предыдущий код, но не pdf, а архив.

Вообще, странные вещи происходят. Хром начал блокировать всплывающие окна. ПДФ файл перестал даже открываться. При window.open архив тоже не помог. Заменил на location =
Вроде работает… посмотрим

Игорь

Добрый день! Прочитал статью, перепробовал различные варианты и ничего не получается. Вкратце о реализации контактной формы:
— сайт на wordpress
-контактная форма CF7, вызывается popup окном, которое создано плагином JetPopup
-на сайте установлен Google Tag Manager, через который есть возможность прослушивать успешную отправку формы.

Что не получается? Т.к. я уже упомянул ранее что контактная форма появляется в popup окне при клике на кнопку на сайте, то при успешной ее отправке хотелось бы чтобы popup окно с формой закрывалось и появлялось новое (уже подготовленное в плагине Jet Popup) popup окно с благодарностью.

Denis Creative

Добрый день, я не работал с плагином JetPopup.
Для плагина Easy FancyBox вот пример простого кода, чтобы после отправки формы, появлялся попап с сообщением «Успешно отправлено» (#popup-success) или «Подписка оформлена» (#popup-success-subscribe), если id формы 210 (если это форма подписки):

Принцип тот же, просто вызов попапа может быть другой.

По необходимости нужно скрыть уведомление об ошибках под формой, чтобы уведомление не отображалось при повторном вызове попапа с формой:

Или скрыть только уведомление об успешной отправке

Антон

Добрый день! Подскажите, пожалуйста, вариант вашего кода, чтобы был редирект в новое окно после отправки формы при условии, что был выбран нужный чек-бокс (если пользователь отметил при вводе формы «хочу забронировать», после отправки формы его перекидывает на бронирование).

Источник