RESWEB

адаптивная кроссбраузерная вёрстка

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

Расскажу на примере конкретного скрипта модального окна, который будем модернизировать. Сам скрипт можете взять здесь jqueryscript.net. Именно этот скрипт стоял на сайте когда потребовалось, чтобы окно открывалось не только по кнопке но еще и само, через несколько секунд, если пользователь на кнопку так и не нажал.
Демо
( Собственно, время можно ставить любое, хоть 3 секунды, хоть 5. )

Автоматическое открытие модального окна

Установка скрипта стандартная, приведена в первоисточнике, в двух словах: кидаете в корень сайта два файла — файл стилей и файл скрипта, подключаете в шапке эти файлы, выводим контейнер модального окна в теле документа. Далее прописываем код инициализации скрипта, где-нибудь ближе к закрытию тега body, с ним и будем работать:

$('button').click(function(e){ 
e.preventDefault(); 
$('#modal-1').modal({title:'Modal Title',effect:'flip-vertical'}); 
});

Чтобы добавить автоматическое открытие окна, вышеприведенный код меняем на этот:

$('button').click(function(e){
  e.preventDefault();
  $('#modal-1').modal({title:'Modal Title',effect:'flip-vertical'});
});
setTimeout(function() {
 $('#modal-1').modal({title:'Modal Title',effect:'flip-vertical'});
}, 5000);

Как видно из кода, мы добавили функцию setTimeout, которая включает модальное окное через указанный промежуток времени, в данном случае это цифра 5000 т.е. 5 секунд.

Добавить комментарий

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


Успешно отправлено!

Я постараюсь с Вами связаться как можно скорее.