Автоматически закрыть Bootstrap modal окно через несколько секунд

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

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

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

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

setTimeout(function() {$(".modal").modal('hide'); }, 3000);

Если вы знакомы с модальными окнами в Бутстрапе, то из этой функции вам понятно, что объектом здесь выступает блок с классом modal. Функция setTimeout определяет время, через которое окно исчезнет с экрана. В данном случае 3 секунды.

Здесь я описал конкретный случай, когда понадобилось вот такое автоматическое закрывание модального окна Bootstrap. Конечно же, данный метод можно применить и в различных поп-апах с участием Bootstrap modal.

Оцените статью