×ボタンで閉じるポップアップを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

×ボタンで閉じるポップアップを作る方法

×ボタンで閉じるポップアップを作る方法を紹介します。このサンプルでは、HTML、CSS、JavaScriptを使い、画面中央に表示されたポップアップを右上の×ボタンで閉じる機能を実装します。

ポップアップには、ユーザーが自分のタイミングで閉じられる操作があると使いやすくなります。×ボタンは多くのWebサイトやWebアプリで使われる一般的な閉じ方なので、お知らせ、確認メッセージ、案内表示などに向いています。

このサンプルでは、ポップアップ右上に×ボタンを配置し、クリックすると非表示にします。表示する文章、背景色、余白、角丸、閉じるボタンの位置や色などは自由に変更できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

コードをコピーして使おう！

<!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_wrap">

    <!-- ポップアップ本体 -->
    <div class="close-button-popup_box" id="close-button-popup-box">

      <!-- 閉じるボタン -->
      <button type="button" class="close-button-popup_close" id="close-button-popup-close" aria-label="閉じる">
        ×
      </button>

      <!-- アイコン -->
      <div class="close-button-popup_icon">
        !
      </div>

      <!-- タイトル -->
      <h1 class="close-button-popup_title">
        お知らせ
      </h1>

      <!-- 説明文 -->
      <p class="close-button-popup_text">
        ×ボタンを押すと閉じられるポップアップです。<br>
        お知らせや確認メッセージなどの表示に利用できます。
      </p>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  padding:40px 20px;  /* ページ内側の余白 */
  background:#f8fafc;  /* 背景色 */
  font-family:sans-serif;  /* フォント */
}

/* ポップアップ表示エリア */
.close-button-popup_wrap{
  display:flex;  /* 中央配置 */
  justify-content:center;  /* 横方向中央 */
  align-items:center;  /* 縦方向中央 */
  min-height:100vh;  /* 画面全体の高さ */
}

/* ポップアップ本体 */
.close-button-popup_box{
  position:relative;  /* 閉じるボタン配置の基準 */
  width:360px;  /* 横幅：変更するとポップアップの幅が変わる */
  max-width:100%;  /* 小さい画面では横幅を調整 */
  padding:34px 28px 28px;  /* 内側余白 */
  border:1px solid #dbe3ef;  /* 枠線 */
  border-radius:16px;  /* 角丸 */
  background:#ffffff;  /* 背景色 */
  box-shadow:0 10px 30px rgba(0,0,0,.08);  /* 影 */
  text-align:center;  /* 中央寄せ */
  box-sizing:border-box;  /* paddingを幅に含める */
}

/* 非表示状態 */
.close-button-popup_box.is-hide{
  display:none;  /* ポップアップを非表示 */
}

/* 閉じるボタン */
.close-button-popup_close{
  position:absolute;  /* 右上へ配置 */
  top:12px;  /* 上からの位置：変更すると上下位置が変わる */
  right:12px;  /* 右からの位置：変更すると左右位置が変わる */
  width:32px;  /* ボタンサイズ */
  height:32px;  /* ボタンサイズ */
  border:none;  /* 枠線なし */
  border-radius:50%;  /* 円形 */
  background:#eff6ff;  /* 背景色 */
  color:#2563eb;  /* ×の色 */
  font-size:22px;  /* ×のサイズ */
  line-height:1;  /* 行の高さ */
  cursor:pointer;  /* マウスカーソル */
}

/* アイコン */
.close-button-popup_icon{
  display:flex;  /* 中央配置 */
  justify-content:center;  /* 横方向中央 */
  align-items:center;  /* 縦方向中央 */
  width:64px;  /* 横幅 */
  height:64px;  /* 高さ */
  margin:0 auto 20px;  /* 下余白 */
  border-radius:50%;  /* 円形 */
  background:#2563eb;  /* 背景色 */
  color:#ffffff;  /* 文字色 */
  font-size:28px;  /* 文字サイズ */
  font-weight:700;  /* 太字 */
}

/* タイトル */
.close-button-popup_title{
  margin:0 0 12px;  /* 下余白 */
  font-size:22px;  /* 文字サイズ */
  font-weight:700;  /* 太字 */
}

/* 説明文 */
.close-button-popup_text{
  margin:0;  /* 外側余白 */
  color:#4b5563;  /* 文字色 */
  line-height:1.8;  /* 行間：変更すると読みやすさが変わる */
}

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

// 閉じるボタンを取得
const closeButtonPopupClose=document.getElementById("close-button-popup-close");

// ×ボタンがクリックされたら閉じる
closeButtonPopupClose.addEventListener("click",function(){

  // ポップアップを非表示
  closeButtonPopupBox.classList.add("is-hide");

});

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。index.html にポップアップの構造を記述し、style.css でデザインや閉じるボタンの配置を設定しています。script.js では、×ボタンをクリックするとポップアップを閉じる処理を実装しています。

sample/
├── index.html
├── style.css
└── script.js

sample フォルダ内へ各ファイルを配置し、sample/index.html をブラウザで開くと動作を確認できます。タイトルや説明文は index.html、背景色や文字色、横幅、余白、角丸などのデザインは style.css で変更できます。閉じるボタンの位置は style.css の top と right の値を変更することで調整できます。例えば top:12px は上から12px、right:12px は右から12pxの位置を表し、数値を変更するとボタンの表示位置が移動します。