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

ポップアップ
2026.07.06

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

×ボタンで閉じるポップアップを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、「ポップアップを表示」ボタンをクリックすると画面中央にポップアップを表示します。ポップアップ右上に配置された×ボタンをクリックすると、表示されているポップアップを閉じられます。

お知らせや補足情報、キャンペーン案内、確認メッセージなど、ページ上へ一時的な内容を表示したい場合に利用できます。閉じるための操作を×ボタンに限定しているため、外側をクリックしてもポップアップは閉じません。表示方法と閉じる方法が分かりやすい、基本的な構成です。

HTMLではタイトル、本文、表示ボタン、×ボタンの文字を変更できます。CSSでは背景色、横幅、余白、角丸、影、配置などを調整でき、JavaScriptでは表示ボタンと×ボタンによる開閉処理を実装しています。スマートフォン・タブレット・PCで利用できるレスポンシブ対応のサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

×ボタンで閉じるポップアップ

ページ読み込み時に表示されるポップアップを再現したデモです。

お知らせ

このポップアップは右上の
×ボタンで閉じます。

ページ読み込み時の表示を再現しています。右上の×ボタンを押すと閉じ、「もう一度表示する」を押すと再び表示されます。

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

<!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_overlay" id="close-button-popup">

      <div class="close-button-popup_box">

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

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

        <!-- メッセージ -->
        <p class="close-button-popup_message">
          このポップアップは右上の<br>
          ×ボタンで閉じます。
        </p>

      </div>

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。ページを開くとポップアップが表示され、右上の×ボタンをクリックすると閉じるシンプルなサンプルです。ポップアップは×ボタンのみで閉じる仕様となっており、閉じる操作を分かりやすく実装したい場面で利用できます。

HTMLではポップアップ本体やタイトル、メッセージ、×ボタンを配置し、CSSでは背景や角丸、影、ボタンデザインなどの見た目を設定しています。JavaScriptでは×ボタンがクリックされたときにポップアップを閉じる処理のみを記述しているため、動作の仕組みも理解しやすい構成です。

デザインと動作をそれぞれ別ファイルへ分けているため、見た目だけ変更したい場合はCSS、表示内容を変更したい場合はHTML、閉じる動作を変更したい場合はJavaScriptを編集するだけで対応できます。初心者でも構成を把握しやすく、他のページへ流用しやすいサンプルです。 

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

各ファイルの役割
index.htmlはポップアップ全体を構成するファイルです。タイトル、メッセージ、×ボタンなどの表示内容を編集できます。

style.cssはポップアップのデザインを設定するファイルです。背景色、横幅、余白、角丸、影、×ボタンの色やサイズなどを変更できます。

script.jsは×ボタンをクリックしたときにポップアップを閉じる処理を記述するファイルです。動作を変更したい場合は、このファイルを編集します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開くとポップアップが表示されます。右上の×ボタンをクリックするとポップアップを閉じることができます。

カスタマイズできる内容
index.htmlではタイトル、メッセージ、×ボタンのaria-labelなどを変更できます。

style.cssではポップアップの横幅、背景色、余白、角丸、影、文字サイズ、×ボタンの大きさや色、配置位置などを変更できます。

script.jsでは×ボタンを押したときの処理を編集できます。

数値調整
style.css

max-width:760px;
ポップアップ全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。

min-height:620px;
ポップアップ全体の最小高さです。値を大きくすると高さが増え、小さくするとコンパクトになります。

padding:48px 32px 40px;
ポップアップ本体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。

max-width:460px;
ポップアップ本体の最大横幅です。値を変更するとポップアップ本体の横幅が変わります。

border-radius:20px;
ポップアップ本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

width:42px;・height:42px;
×ボタンの大きさです。値を大きくすると押しやすくなり、小さくするとコンパクトになります。

font-size:26px;
×印の文字サイズです。値を大きくすると×印が大きく表示され、小さくすると控えめになります。

transition:background-color .3s ease;
ホバー時の背景色が切り替わる時間です。.3は0.3秒を表します。値を大きくするとゆっくり変化し、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%とmax-widthを使用しているため、画面幅に合わせてポップアップが自動で縮小されます。また、@media (max-width:640px)では余白や文字サイズを調整しているため、スマートフォン・タブレット・PCでも見やすく利用できます。

コメント