フェードイン・フェードアウトで表示するポップオーバーの作り方【HTML/CSS/JavaScript・サンプルコード付き】

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>フェードイン・フェードアウトで表示するポップオーバー</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ポップオーバー全体 -->
  <div class="fade-in-popover_wrap">

    <!-- タイトル -->
    <div class="fade-in-popover_title">
      フェードイン・フェードアウトするポップオーバー
    </div>

    <!-- 説明文 -->
    <p class="fade-in-popover_text">
      ボタンをクリックすると、ゆっくりフェードしながら表示・非表示が切り替わります。
    </p>

    <!-- ボタンとポップオーバー -->
    <div class="fade-in-popover_area">

      <!-- 表示ボタン -->
      <button
        class="fade-in-popover_button"
        id="fade-in-popover-button"
        type="button">
        ポップオーバーを表示
      </button>

      <!-- ポップオーバー -->
      <div
        class="fade-in-popover_popup"
        id="fade-in-popover-popup">
        フェードインしながら少し下へ移動して表示され、閉じるとフェードアウトしながら元の位置へ戻ります。
      </div>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
  box-sizing:border-box; /* paddingとborderを要素サイズへ含める */
}

/* ポップオーバー全体 */
.fade-in-popover_wrap{
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto 180px; /* 上40px・左右中央・下180pxの余白。下側を広くしてポップオーバーの表示領域を確保する */
  padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  text-align:center; /* 内容を中央揃えにする */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.fade-in-popover_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
}

/* 説明文 */
.fade-in-popover_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくするとボタンとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* ボタンとポップオーバー */
.fade-in-popover_area{
  position:relative; /* ポップオーバーを配置する基準 */
  display:inline-block; /* ボタンの横幅に合わせて要素サイズを決める */
}

/* 表示ボタン */
.fade-in-popover_button{
  padding:14px 28px; /* 上下14px・左右28pxの内側余白。値を大きくするとボタンが大きくなる */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* ポップオーバー */
.fade-in-popover_popup{
  position:absolute; /* ボタンを基準に配置 */
  top:calc(100% + 18px); /* ボタンの下18pxへ配置。18pxを変更するとボタンとの距離が変わる */
  left:50%; /* 横方向の中央を基準にする */
  z-index:10; /* 他の要素より前面へ表示 */
  width:300px; /* ポップオーバーの横幅。値を大きくすると横に広がる */
  padding:18px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #dbe4f0; /* ポップオーバーを囲む枠線 */
  border-radius:12px; /* ポップオーバーの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* ポップオーバーの背景色 */
  box-shadow:0 20px 45px rgba(15,23,42,.16); /* ポップオーバーの影。数値を大きくすると影が広がる */
  color:#374151; /* ポップオーバー内の文字色 */
  line-height:1.8; /* ポップオーバー内の行間 */
  text-align:left; /* 文章を左揃えにする */
  transform:translateX(-50%) translateY(-18px) scale(.92); /* 横中央へ配置し、上へ18px移動・92%へ縮小した状態から開始 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */

  opacity:0; /* 初期状態では完全に透明にする */
  visibility:hidden; /* 初期状態では非表示にする */
  pointer-events:none; /* 非表示中はマウス操作を受け付けない */

  /*
    フェードイン・フェードアウトの時間です。
    0.45秒かけて透明度・位置・大きさ・表示状態を切り替えます。
    値を大きくするとゆっくり、小さくすると速くなります。
  */
  transition:
    opacity .45s ease,
    transform .45s ease,
    visibility .45s ease;
}

/* 吹き出しの三角 */
.fade-in-popover_popup::before{
  content:""; /* 擬似要素を表示 */
  position:absolute; /* ポップオーバーを基準に配置 */
  top:-8px; /* ポップオーバーの上へ8pxはみ出して配置 */
  left:50%; /* 横方向の中央を基準にする */
  width:16px; /* 三角部分の横幅。値を大きくすると三角が大きくなる */
  height:16px; /* 三角部分の高さ。値を大きくすると三角が大きくなる */
  border-top:1px solid #dbe4f0; /* 三角上側の枠線 */
  border-left:1px solid #dbe4f0; /* 三角左側の枠線 */
  background:#ffffff; /* 三角部分の背景色 */
  transform:translateX(-50%) rotate(45deg); /* 中央へ配置して45度回転し、三角形に見せる */
}

/* 表示状態 */
.fade-in-popover_popup.show{
  opacity:1; /* ポップオーバーを完全に表示する */
  visibility:visible; /* 表示状態にする */
  pointer-events:auto; /* 表示中はマウス操作を有効にする */
  transform:translateX(-50%) translateY(0) scale(1); /* 本来の位置と大きさへ戻す */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* スマートフォン用のポップオーバー全体 */
  .fade-in-popover_wrap{
    margin-bottom:250px; /* 下側の余白を広げてポップオーバーの表示領域を確保する */
    padding:24px 18px; /* 上下24px・左右18pxへ内側余白を縮小 */
  }

  /* スマートフォン用のポップオーバー */
  .fade-in-popover_popup{
    width:260px; /* スマートフォンでは横幅を260pxへ縮小 */
  }

}

/* 表示ボタンを取得 */
const fadeInPopoverButton=
  document.getElementById(
    "fade-in-popover-button"
  );

/* ポップオーバーを取得 */
const fadeInPopoverPopup=
  document.getElementById(
    "fade-in-popover-popup"
  );

/* 表示ボタンをクリックした時 */
fadeInPopoverButton.addEventListener(
  "click",
  function(){

    /*
      showクラスを付け外しして
      ポップオーバーの表示・非表示を切り替えます。
      フェード時間はstyle.cssのtransitionで変更できます。
    */
    fadeInPopoverPopup.classList.toggle(
      "show"
    );

  }
);