外側クリックで閉じるポップアップを作る方法【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="outside-click-popup_wrap">

    <!-- ポップアップ配置エリア -->
    <div class="outside-click-popup_popup" id="outside-click-popup">

      <!-- ポップアップ本体 -->
      <div class="outside-click-popup_box">

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

        <!-- メッセージ -->
        <p class="outside-click-popup_message">
          ポップアップの外側をクリックすると、<br>
          ポップアップを閉じることができます。
        </p>

      </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; /* ページ全体で使用するフォント */
}

/* ポップアップ表示エリア */
.outside-click-popup_wrap{
  position:relative; /* ポップアップ配置エリアの基準位置にする */
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:760px; /* 最大横幅。値を大きくすると表示エリアが横に広がる */
  min-height:620px; /* 最小の高さ。値を大きくすると表示エリアが高くなる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  border:1px solid #e5e7eb; /* 表示エリアを囲む枠線 */
  border-radius:20px; /* 表示エリアの角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 表示エリアの背景色 */
  box-sizing:border-box; /* borderを横幅へ含める */
  overflow:hidden; /* 表示エリアからはみ出した内容を隠す */
}

/* ポップアップ配置エリア */
.outside-click-popup_popup{
  position:absolute; /* 表示エリア全体へ重ねて配置 */
  inset:0; /* 上下左右を0にして表示エリア全体へ広げる */
  display:flex; /* ポップアップ本体を中央配置する */
  justify-content:center; /* 水平方向の中央へ配置 */
  align-items:center; /* 垂直方向の中央へ配置 */
  padding:32px; /* 外側のクリック領域とポップアップ本体の間隔 */
  box-sizing:border-box; /* paddingを横幅と高さへ含める */
}

/* 非表示状態 */
.outside-click-popup_popup.outside-click-popup_hide{
  display:none; /* 外側クリック後にポップアップ全体を非表示にする */
}

/* ポップアップ本体 */
.outside-click-popup_box{
  width:100%; /* 利用できる横幅いっぱいに表示 */
  max-width:460px; /* 最大横幅。値を大きくするとポップアップが横に広がる */
  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を横幅へ含める */
}

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

/* メッセージ */
.outside-click-popup_message{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#4b5563; /* メッセージの文字色 */
  font-size:20px; /* メッセージの文字サイズ。値を大きくすると文字が大きくなる */
  line-height:2; /* メッセージの行間。値を大きくすると行間が広がる */
}

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

  /* ポップアップ表示エリア */
  .outside-click-popup_wrap{
    min-height:520px; /* スマートフォンでは表示エリアの高さを小さくする */
  }

  /* ポップアップ配置エリア */
  .outside-click-popup_popup{
    padding:24px 18px; /* スマートフォンでは外側の余白を小さくする */
  }

  /* ポップアップ本体 */
  .outside-click-popup_box{
    padding:32px 24px; /* スマートフォンでは内側余白を小さくする */
  }

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

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

}

/* ポップアップ配置エリアを取得 */
const popup=document.getElementById("outside-click-popup");

/* ポップアップの外側がクリックされたとき */
popup.addEventListener("click",function(event){

  /* クリックされた要素が配置エリア自身の場合だけ閉じる */
  if(event.target===popup){

    /* ポップアップ全体を非表示にする */
    popup.classList.add("outside-click-popup_hide");

  }

});