一定期間に一度だけ表示されるポップアップ

Explanation

デモは1日に1度表示されるように設定しているため、常に表示させるには以下のURLでご覧ください。

https://www.kblog53.com/demos/periodic-popup-display?debug

Sample Code

index.html

<div id="js-popup" class="c-popup">
  <button type="button" class="c-popup__background js-popupClose"></button>
  <div class="c-popup__body">
    <div class="c-popup__inner">
      <button type="button" class="c-popup__close js-popupClose">
        <svg role="presentation" viewBox="0 0 16 14">
          <path d="M15 0L1 14m14 0L1 0" stroke="currentColor" fill="none" fill-rule="evenodd"></path>
        </svg>
      </button>
      <a href="" class="c-popup__image">
        <img src="https://placehold.jp/400x400.jpg" alt="" width="400" height="400" decoding="async" />
      </a>
    </div>
  </div>
</div>

style.css

.c-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

.js-popup--show {
  opacity: 1;
  pointer-events: auto;
}

.c-popup__background {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.c-popup__body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80%, 400px);
  background-color: #fff;
}

.c-popup__inner {
  position: relative;
}

.c-popup__close {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(120%, -120%);
  display: inline-grid;
  place-content: center;
  width: 22px;
  height: 22px;
  padding: 2px;
  color: #fff;
  background-color: transparent;
  border: none;
}

.c-popup__close svg {
  width: 100%;
  height: auto;
}

.c-popup__image img {
  width: 100%;
  height: auto;
}

@media (hover: hover) {
  .c-popup__background {
    transition: opacity 0.5s ease-in-out;
    cursor: pointer;
  }
  .c-popup__close {
    transition: opacity 0.5s ease-in-out;
    cursor: pointer;
  }
  .c-popup__close:hover {
    opacity: 0.7;
  }
  .c-popup__image {
    transition: opacity 0.5s ease-in-out;
  }
  .c-popup__image:hover {
    opacity: 0.7;
  }
}

index.js

document.addEventListener("DOMContentLoaded", () => {
  const DAYS_TO_EXPIRE = 1; // 有効期限の日数

  const POPUP_COOKIE_NAME = `popupShowFlag`; // Cookie名
  const POPUP_SHOW_CLASS = `js-popup--show`; // 表示クラス名
  
  const popupElement = document.getElementById("js-popup");

  if (popupElement && !document.cookie.includes(`${POPUP_COOKIE_NAME}=true`)) {
    const popupCloseButtons = popupElement.querySelectorAll(".js-popupClose");

    setTimeout(() => {
      popupElement.classList.add(POPUP_SHOW_CLASS);
      const maxAge = DAYS_TO_EXPIRE * (24 * 60 * 60);
      document.cookie = `${POPUP_COOKIE_NAME}=true; max-age=${maxAge}; path=/;`;
    }, 300);

    popupCloseButtons.forEach((button) => {
      button.addEventListener("click", () => {
        popupElement.classList.remove(POPUP_SHOW_CLASS);
      });
    });
  }
});