閉じるボタンで閉じられるポップアップの方法【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="close-button-popup_box" id="close-button-popup">

    <!-- 見出し -->
    <div class="close-button-popup_heading">
      お知らせ
    </div>

    <!-- メッセージ -->
    <p class="close-button-popup_message">
      閉じるボタンを押すと、<br>
      ポップアップを閉じることができます。
    </p>

    <!-- 閉じるボタン -->
    <button class="close-button-popup_close" type="button">
      閉じる
    </button>

  </div>

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

</body>
</html>

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

/* ポップアップ */
.close-button-popup_box{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:460px; /* 最大横幅。値を大きくするとポップアップが横に広がる */
  margin:120px auto 0; /* 上側120pxの余白を付けて左右中央へ配置 */
  padding:40px 32px; /* 上下40px・左右32px。値を大きくすると内側の余白が広がる */
  border-radius:20px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* ポップアップの背景色 */
  box-shadow:0 20px 50px rgba(15,23,42,.18); /* 20px・50pxを変更すると影の位置や広がりが変わる */
  text-align:center; /* 内容を中央揃えにする */
  box-sizing:border-box; /* paddingを横幅へ含める */
}

/* 見出し */
.close-button-popup_heading{
  margin:0 0 20px; /* 下側20pxの余白。値を大きくするとメッセージとの間隔が広がる */
  color:#111827; /* 見出しの文字色 */
  font-size:34px; /* 見出しの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 見出しを太字にする */
}

/* メッセージ */
.close-button-popup_message{
  margin:0 0 32px; /* 下側32pxの余白。値を大きくするとボタンとの間隔が広がる */
  color:#4b5563; /* メッセージの文字色 */
  font-size:20px; /* メッセージの文字サイズ。値を大きくすると文字が大きくなる */
  line-height:2; /* メッセージの行間。値を大きくすると行間が広がる */
}

/* 閉じるボタン */
.close-button-popup_close{
  padding:14px 40px; /* 上下14px・左右40px。値を大きくするとボタンが大きくなる */
  border:none; /* ボタンの標準枠線を削除 */
  border-radius:999px; /* 値を大きくして丸い形にする */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:18px; /* ボタンの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスポインターを指の形にする */
}

/* ポップアップの非表示状態 */
.close-button-popup_hidden{
  display:none; /* ポップアップを画面から非表示にする */
}

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

  /* ポップアップ */
  .close-button-popup_box{
    margin-top:80px; /* スマートフォンでは上側の余白を80pxにする */
    padding:32px 24px; /* スマートフォンでは内側の余白を小さくする */
  }

  /* 見出し */
  .close-button-popup_heading{
    font-size:28px; /* スマートフォンでは見出しを小さくする */
  }

  /* メッセージ */
  .close-button-popup_message{
    font-size:18px; /* スマートフォンではメッセージを小さくする */
  }

}

/* ポップアップを取得 */
const popup=document.getElementById("close-button-popup");

/* 閉じるボタンを取得 */
const closeButton=document.querySelector(".close-button-popup_close");

/* 閉じるボタンをクリックしたとき */
closeButton.addEventListener("click",function(){

  /* 非表示状態のクラスを追加 */
  popup.classList.add("close-button-popup_hidden");

});