ポップアップとは

背景を暗くしないまま、画面の隅に時間差で表示される小さな窓。お知らせやキャンペーン告知に使われる。

概要

画面の右下などに、時間差で表示される小さな窓です。背景を暗くせず、ページの操作もブロックしないため、モーダルほど強く注意を引かずに、お知らせやキャンペーンの案内をそっと見せたいときに使われます。閉じるボタンでいつでも消せるようにするのが基本です。

別名

表記ゆれ：ポップアップウィンドウ、ポップアップバナー、popup

かつては別のウィンドウを新しく開く「ポップアップブロック」の対象を指す言葉でしたが、現在は同じページの中に浮かせて表示する小窓を指すことがほとんどです。

AI への伝え方

「右下にポップアップを出して」「ページを開いて数秒後にお知らせを表示して」で通じます。何秒後に表示するか、スクロールが条件かなど表示タイミングの仕様を伝えると意図どおりになります。

似たパーツとの違い

「モーダル」は背景を暗転させて操作をブロックしますが、ポップアップは背景の操作を妨げない軽い表示です。「ポップオーバー」はボタンなど特定の要素に紐づいて近くに表示されるのに対し、ポップアップは画面の隅に独立して表示されます。「通知バー」は画面の上部や下部に帯状に表示されますが、ポップアップは四角い小窓として表示される違いがあります。

デモ

コード

HTML

<div class="popup-demo">
  <main class="popup-demo__body">
    <p>これはダミーのページ本文です。しばらくすると右下にお知らせが表示されます。</p>
    <p>ポップアップが表示されたら、閉じるボタンで消せることを確認してください。</p>
  </main>

  <div class="popup-demo__popup" role="dialog" aria-label="お知らせ" hidden>
    <button class="popup-demo__close" type="button" data-popup-close aria-label="閉じる">×</button>
    <p class="popup-demo__title">キャンペーン開催中</p>
    <p class="popup-demo__text">今なら会員登録で特典がもらえます。</p>
  </div>
</div>

CSS

.popup-demo {
  font-family: sans-serif;
}

.popup-demo__body {
  color: #333;
  line-height: 1.8;
}

.popup-demo__body p {
  margin: 0 0 16px;
}

.popup-demo__popup {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 240px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  padding: 16px;
}

.popup-demo__close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  color: #666;
}

.popup-demo__title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: bold;
}

.popup-demo__text {
  margin: 0;
  font-size: 13px;
  color: #333;
}

const popup = document.querySelector(".popup-demo__popup");

setTimeout(() => {
  popup.hidden = false;
}, 1200);

document.querySelector("[data-popup-close]").addEventListener("click", () => {
  popup.hidden = true;
});