Показываем PopUp каждые 6 часов

Финальный код с комментариями, а также HTML и CSS для попапа: HTML

HTML

<div id="popup" class="popup">
  <div class="popup__content">
    <button class="popup__close" onclick="closePopup()">×</button>
    <h2>Заголовок Попапа</h2>
    <p>Содержимое попапа. Здесь может быть текст, изображение или любая другая информация.</p>
  </div>
</div>

CSS

/* Стили для попапа */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
  display: none; /* Скрываем попап по умолчанию */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup._show {
  display: flex; /* Показываем попап */
}

.popup__content {
  background: #fff; /* Белый фон */
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* Тень */
}

.popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #000;
}

JavaScript

// Показываем попап и сохраняем время показа
function showPopup() {
  document.getElementById("popup").classList.add("_show");
  localStorage.setItem('popupLastShown', Date.now()); // Сохраняем текущее время в миллисекундах
}

// Проверяем, нужно ли показывать попап
function shouldShowPopup() {
  const lastShown = localStorage.getItem('popupLastShown');
  const now = Date.now();
  const threeHours = 3 * 60 * 60 * 1000; // 3 часа в миллисекундах
  
  // Показывать, если попап не показывался последние 3 часа
  return !lastShown || (now - parseInt(lastShown, 10) > threeHours);
}

// Закрываем попап
function closePopup() {
  document.getElementById("popup").classList.remove("_show");
}

// Таймер для проверки и показа попапа
setTimeout(() => {
  if (shouldShowPopup()) {
    showPopup();
  }
}, 1000); // Задержка 1 секунда перед проверкой

Пояснения:

1. HTML: Попап содержит контейнер popup с внутренним содержимым popup__content и кнопку для закрытия.
2. CSS:
   • popup — центрирует контент и создает затемненный фон.
   • popup._show — делает попап видимым, применяя display: flex.
   • popup__close — кнопка для закрытия попапа.
3. JavaScript:
   • showPopup() добавляет класс _show и сохраняет текущее время.
   • shouldShowPopup() проверяет, прошло ли 3 часа с последнего показа.
   • closePopup() удаляет класс _show, скрывая попап.