Модальное окно по таймеру

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

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

Вариант 1: использование функции setTimeout

Один из способов запустить модальное окно через определенное время — это использовать функцию setTimeout, которая позволяет выполнить какой-то код с задержкой. Например, если мы хотим показать модальное окно через 5 секунд после загрузки страницы, мы можем написать такой js код:

// Находим элемент модального окна по его id
let modal = document.getElementById("modal");

// Находим элемент, который закрывает модальное окно по его классу
let close = document.getElementsByClassName("close")[0];

// Добавляем обработчик события click на элемент закрытия, который скрывает модальное окно
close.onclick = function() {
  modal.style.display = "none";
}

// Запускаем функцию, которая показывает модальное окно, через 5 секунд (5000 миллисекунд)
setTimeout(function() {
  modal.style.display = "block";
}, 5000);

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

<!-- Модальное окно -->
<div id="modal" class="modal">

  <!-- Содержимое модального окна -->
  <div class="modal-content">
    <span class="close">×</span>
    <p>Это модальное окно, которое появляется через 5 секунд</p>
  </div>

</div>

А его оформление примерно так:

/* Стили для модального окна */

/* Скрываем модальное окно по умолчанию */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

/* Стили для содержимого модального окна */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* Стили для элемента закрытия модального окна */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

Вариант 2: использование события DOMContentLoaded

Другой способ запустить модальное окно через определенное время — это использовать событие DOMContentLoaded, которое срабатывает, когда вся разметка страницы загружена, но не обязательно все ресурсы, такие как изображения, стили и скрипты. Это событие можно использовать для того, чтобы запустить функцию, которая показывает модальное окно, после того, как страница будет готова к взаимодействию с пользователем. Например, если мы хотим показать модальное окно через 3 секунды после того, как страница будет полностью загружена, мы можем написать такой js код:

// Находим элемент модального окна по его id
let modal = document.getElementById("modal");

// Находим элемент, который закрывает модальное окно по его классу
let close = document.getElementsByClassName("close")[0];

// Добавляем обработчик события click на элемент закрытия, который скрывает модальное окно
close.onclick = function() {
  modal.style.display = "none";
}

// Добавляем обработчик события DOMContentLoaded на объект document, который запускает функцию, которая показывает модальное окно, через 3 секунды
document.addEventListener("DOMContentLoaded", function() {
  setTimeout(function() {
    modal.style.display = "block";
  }, 3000);
});

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

Вариант 3: использование события load

Еще один способ запустить модальное окно через определенное время — это использовать событие load, которое срабатывает, когда вся страница и все ее ресурсы полностью загружены. Это событие можно использовать для того, чтобы запустить функцию, которая показывает модальное окно, после того, как страница будет полностью готова к отображению. Например, если мы хотим показать модальное окно через 10 секунд после того, как страница будет полностью загружена, мы можем написать такой код:

// Находим элемент модального окна по его id
let modal = document.getElementById("modal");

// Находим элемент, который закрывает модальное окно по его классу
let close = document.getElementsByClassName("close")[0];

// Добавляем обработчик события click на элемент закрытия, который скрывает модальное окно
close.onclick = function() {
  modal.style.display = "none";
}

// Добавляем обработчик события load на объект window, который запускает функцию, которая показывает модальное окно, через 10 секунд
window.addEventListener("load", function() {
  setTimeout(function() {
    modal.style.display = "block";
  }, 10000);
});

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

Вариант 4: использование куки для проверки, показывалось ли модальное окно ранее

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

Один из способов использовать куки для вывода модального окна — это проверять, показывалось ли модальное окно ранее, и если нет, то показывать его через определенное время. Это может быть полезно, если мы хотим показать модальное окно только один раз для каждого пользователя или для каждой сессии. Например, если мы хотим показать модальное окно через 7 секунд после загрузки страницы, но только если пользователь не видел его раньше, мы можем написать такой код:

// Находим элемент модального окна по его id
let modal = document.getElementById("modal");

// Находим элемент, который закрывает модальное окно по его классу
let close = document.getElementsByClassName("close")[0];

// Добавляем обработчик события click на элемент закрытия, который скрывает модальное окно и устанавливает куки
close.onclick = function() {
  modal.style.display = "none";
  // Устанавливаем куки с именем modalShown и значением true, которые будут действовать в течение 30 дней
  document.cookie = "modalShown=true; max-age=2592000";
}

// Создаем функцию, которая проверяет, есть ли куки с заданным именем
function checkCookie(name) {
  // Получаем все куки в виде строки
  let cookies = document.cookie;
  // Разбиваем строку на массив по символу ;
  let cookieArray = cookies.split(";");
  // Проходим по массиву и ищем куки с нужным именем
  for (let i = 0; i < cookieArray.length; i++) {
    // Удаляем пробелы в начале и в конце строки
    let cookie = cookieArray[i].trim();
    // Проверяем, начинается ли строка с нужного имени
    if (cookie.startsWith(name + "=")) {
      // Возвращаем значение куки, отрезав имя и символ =
      return cookie.substring(name.length + 1);
    }
  }
  // Если куки с нужным именем не найдены, возвращаем null
  return null;
}

// Запускаем функцию, которая показывает модальное окно, через 7 секунд (7000 миллисекунд), но только если куки modalShown не равны true
setTimeout(function() {
  // Проверяем значение куки modalShown
  let modalShown = checkCookie("modalShown");
  // Если куки не равны true, показываем модальное окно
  if (modalShown !== "true") {
    modal.style.display = "block";
  }
}, 7000);

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

Вариант 5: использование куки для сохранения времени последнего показа модального окна

Еще один способ использовать куки для вывода модального окна — это сохранять время последнего показа модального окна в куки и показывать его снова через определенный интервал. Это может быть полезно, если мы хотим показывать модальное окно периодически, например, раз в день, раз в неделю или раз в месяц. Например, если мы хотим показывать модальное окно через 10 секунд после загрузки страницы, но не чаще, чем раз в сутки, мы можем написать такой код:

// Находим элемент модального окна по его id
let modal = document.getElementById("modal");

// Находим элемент, который закрывает модальное окно по его классу
let close = document.getElementsByClassName("close")[0];

// Добавляем обработчик события click на элемент закрытия, который скрывает модальное окно
close.onclick = function() {
  modal.style.display = "none";
}

// Создаем функцию, которая возвращает текущее время в миллисекундах
function getCurrentTime() {
  // Создаем объект даты
  let date = new Date();
  // Возвращаем время в миллисекундах с начала эпохи
  return date.getTime();
}

// Создаем функцию, которая проверяет, есть ли куки с заданным именем
function checkCookie(name) {
  // Получаем все куки в виде строки
  let cookies = document.cookie;
  // Разбиваем строку на массив по символу ;
  let cookieArray = cookies.split(";");
  // Проходим по массиву и ищем куки с нужным именем
  for (let i = 0; i < cookieArray.length; i++) {
    // Удаляем пробелы в начале и в конце строки
    let cookie = cookieArray[i].trim();
    // Проверяем, начинается ли строка с нужного имени
    if (cookie.startsWith(name + "=")) {
      // Возвращаем значение куки, отрезав имя и символ =
      return cookie.substring(name.length + 1);
    }
  }
  // Если куки с нужным именем не найдены, возвращаем null
  return null;
}

// Запускаем функцию, которая показывает модальное окно, через 10 секунд (10000 миллисекунд), но только если прошло больше суток с последнего показа
setTimeout(function() {
  // Проверяем значение куки lastModalTime, которое хранит время последнего показа модального окна в миллисекундах
  let lastModalTime = checkCookie("lastModalTime");
  // Если куки не существуют или равны пустой строке, значит модальное окно не показывалось раньше, и мы можем его показать
  if (!lastModalTime || lastModalTime === "") {
    modal.style.display = "block";
    // Устанавливаем куки с именем lastModalTime и значением текущего времени в миллисекундах, которые будут действовать в течение 30 дней
    document.cookie = "lastModalTime=" + getCurrentTime() + "; max-age=2592000";
  } else {
    // Если куки существуют, преобразуем их в число
    lastModalTime = Number(lastModalTime);
    // Получаем текущее время в миллисекундах
    let currentTime = getCurrentTime();
    // Вычисляем разницу между текущим временем и временем последнего показа модального окна в миллисекундах
    let timeDiff = currentTime - lastModalTime;
    // Вычисляем количество миллисекунд в сутках
    let dayInMillis = 24 * 60 * 60 * 1000;
    // Если разница больше или равна количеству миллисекунд в сутках, значит прошло больше суток с последнего показа модального окна, и мы можем его показать
    if (timeDiff >= dayInMillis) {
      modal.style.display = "block";
      // Обновляем куки с именем lastModalTime и значением текущего времени в миллисекундах, которые будут действовать // только если прошло больше суток с последнего показа
setTimeout(function() {
    // Проверяем значение куки lastModalTime, которое хранит время последнего показа модального окна в миллисекундах
    let lastModalTime = checkCookie("lastModalTime");
    // Если куки не существуют или равны пустой строке, значит модальное окно не показывалось раньше, и мы можем его показать
    if (!lastModalTime || lastModalTime === "") {
      modal.style.display = "block";
      // Устанавливаем куки с именем lastModalTime и значением текущего времени в миллисекундах, которые будут действовать в течение 30 дней
      document.cookie = "lastModalTime=" + getCurrentTime() + "; max-age=2592000";
    } else {
      // Если куки существуют, преобразуем их в число
      lastModalTime = Number(lastModalTime);
      // Получаем текущее время в миллисекундах
      let currentTime = getCurrentTime();
      // Вычисляем разницу между текущим временем и временем последнего показа модального окна в миллисекундах
      let timeDiff = currentTime - lastModalTime;
      // Вычисляем количество миллисекунд в сутках
      let dayInMillis = 24 * 60 * 60 * 1000;
      // Если разница больше или равна количеству миллисекунд в сутках, значит прошло больше суток с последнего показа модального окна, и мы можем его показать
      if (timeDiff >= dayInMillis) {
        modal.style.display = "block";
        // Обновляем куки с именем lastModalTime и значением текущего времени в миллисекундах, которые будут действовать в течение 30 дней
        document.cookie = "lastModalTime=" + getCurrentTime() + "; max-age=2592000";
      }
    }
  }, 10000);

FAQ

Как правильно дописать в JS, чтобы модальное окно закрывалось не только по клику на .close, но и по клику ВНЕ модального окна?
На странице уже есть модальное окно которое запускается по клику на кнопку (или ссылку) с ID modalopen, как его запустить

Заключение

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

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru
Добавить комментарий