ESCキーで閉じられるポップオーバーの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ESCキーで閉じられるポップオーバーの作り方

ESCキーで閉じられるポップオーバーの作り方を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、ボタンをクリックするとポップオーバーを表示し、キーボードのESCキーを押すと閉じる仕組みを実装しています。外側クリックでは閉じないため、キーボード操作による閉じる動作だけを確認できるシンプルなサンプルです。

補足説明や設定画面、ヘルプ表示など、一時的な情報を表示するUIとして利用できます。ESCキーによる閉じる操作を追加したい場合の基本実装として活用でき、既存サイトへも組み込みやすい構成になっています。

HTMLではタイトルやボタンの文字、ポップオーバー内の文章を変更できます。CSSでは色や余白、横幅、角丸、影、表示位置などを自由にカスタマイズでき、JavaScriptではポップオーバーの表示切り替えとESCキーによる閉じる処理のみを実装しています。スマートフォン・タブレット・PCで利用できるレスポンシブ対応のサンプルです。

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

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

デモ

「ポップオーバーを表示」を押したあと、ESCキーを押すとポップオーバーが閉じます。外側をクリックしても閉じません。

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

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

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

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

  <!-- ページタイトル -->
  <title>ESCキーで閉じられるポップオーバー</title>

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

</head>
<body>

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

    <!-- タイトル -->
    <div class="esc-close-popover_title">
      ESCキーで閉じられるポップオーバー
    </div>

    <!-- 説明文 -->
    <p class="esc-close-popover_text">
      ボタンを押して表示したあと、ESCキーを押すと閉じます。
    </p>

    <!-- ボタンとポップオーバーの配置領域 -->
    <div class="esc-close-popover_area">

      <!-- 表示切り替えボタン -->
      <button
        class="esc-close-popover_button"
        id="esc-close-popover-button"
        type="button"
        aria-controls="esc-close-popover-box"
        aria-expanded="false">
        ポップオーバーを表示
      </button>

      <!-- ポップオーバー -->
      <div
        class="esc-close-popover_box"
        id="esc-close-popover-box"
        role="status"
        aria-hidden="true">

        このポップオーバーはESCキーで閉じます。外側をクリックしても閉じません。

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

/* ポップオーバー全体と子要素 */
.esc-close-popover_wrap,
.esc-close-popover_wrap *{
  box-sizing:border-box; /* paddingとborderを要素の横幅や高さへ含める */
}

/* ポップオーバー全体 */
.esc-close-popover_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小する */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置する */
  padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  text-align:center; /* 内容を中央揃えにする */
}

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

/* 説明文 */
.esc-close-popover_text{
  margin:0 0 28px; /* 下側28pxの余白。値を大きくするとボタンとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* ボタンとポップオーバーの配置領域 */
.esc-close-popover_area{
  position:relative; /* ポップオーバーの配置基準にする */
  display:inline-block; /* ボタンの横幅に合わせて配置領域を作る */
  margin-bottom:180px; /* 下側へポップオーバーを表示する空間を確保する */
}

/* 表示切り替えボタン */
.esc-close-popover_button{
  padding:14px 32px; /* 上下14px・左右32px。値を大きくするとボタンが大きくなる */
  border:0; /* ブラウザ標準の枠線を削除する */
  border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font:inherit; /* ページ全体と同じフォントを使用する */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンの文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスポインターを指の形にする */
  transition:background-color .3s ease; /* 0.3秒で背景色を切り替える */
}

/* ボタンへマウスカーソルを重ねたとき */
.esc-close-popover_button:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

/* ボタンをキーボード操作したとき */
.esc-close-popover_button:focus-visible{
  outline:3px solid rgba(37,99,235,.25); /* フォーカス枠の太さ */
  outline-offset:3px; /* ボタンとフォーカス枠の間隔 */
}

/* ポップオーバー */
.esc-close-popover_box{
  position:absolute; /* ボタンを基準に配置する */
  top:calc(100% + 18px); /* ボタンの下から18px離して表示する */
  left:50%; /* 配置領域の横方向中央を基準にする */
  z-index:10; /* 周囲の要素より前面へ表示する */
  width:300px; /* ポップオーバーの横幅。値を大きくすると横に広がる */
  max-width:calc(100vw - 40px); /* 画面幅から左右20pxずつ余白を残す */
  padding:18px; /* 内側余白。値を大きくすると文章と枠線の間隔が広がる */
  border:1px solid #dbe5f1; /* ポップオーバーを囲む枠線 */
  border-radius:14px; /* ポップオーバーの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* ポップオーバーの背景色 */
  box-shadow:0 16px 32px rgba(15,23,42,.12); /* 下方向16px・ぼかし32pxの影を付ける */
  color:#374151; /* ポップオーバー内の文字色 */
  font-size:16px; /* 本文の文字サイズ */
  line-height:1.8; /* 本文の行間。値を大きくすると行間が広がる */
  text-align:left; /* 本文を左揃えにする */
  opacity:0; /* 初期状態では透明にする */
  visibility:hidden; /* 初期状態では非表示にする */
  pointer-events:none; /* 非表示時はクリックやマウス操作を受け付けない */
  transform:translate(-50%,-8px); /* 横中央へ配置し、初期状態では8px上へ移動する */
  transition:
    opacity .3s ease,
    visibility .3s ease,
    transform .3s ease;
  /*
    0.3秒で透明度・表示状態・位置を切り替える。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}

/* ポップオーバー上部の三角形 */
.esc-close-popover_box::before{
  content:""; /* 疑似要素を表示する */
  position:absolute; /* ポップオーバーを基準に配置する */
  top:-10px; /* 上側へ10pxはみ出して配置する */
  left:50%; /* 横方向中央を基準にする */
  width:18px; /* 三角形の元になる四角形の横幅 */
  height:18px; /* 三角形の元になる四角形の高さ */
  border-top:1px solid #dbe5f1; /* 三角形の上側の枠線 */
  border-left:1px solid #dbe5f1; /* 三角形の左側の枠線 */
  background:#ffffff; /* 三角形の背景色 */
  transform:translateX(-50%) rotate(45deg); /* 横中央へ配置し、45度回転して三角形に見せる */
}

/* ポップオーバー表示時 */
.esc-close-popover_box.is-open{
  opacity:1; /* 不透明にして表示する */
  visibility:visible; /* 表示状態へ変更する */
  pointer-events:auto; /* 表示中はクリックやマウス操作を受け付ける */
  transform:translate(-50%,0); /* 横中央を保ったまま元の位置へ移動する */
}

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

  /* ポップオーバー全体 */
  .esc-close-popover_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* ボタンとポップオーバーの配置領域 */
  .esc-close-popover_area{
    width:100%; /* スマートフォンでは横幅いっぱいにする */
    margin-bottom:200px; /* ポップオーバーを表示する下側の空間を確保する */
  }

  /* 表示切り替えボタン */
  .esc-close-popover_button{
    width:100%; /* スマートフォンでは横幅いっぱいに表示する */
  }

  /* ポップオーバー */
  .esc-close-popover_box{
    width:100%; /* スマートフォンでは配置領域の横幅に合わせる */
  }

}

// 表示切り替えボタンを取得
const escClosePopoverButton =
  document.getElementById("esc-close-popover-button");

// ポップオーバーを取得
const escClosePopoverBox =
  document.getElementById("esc-close-popover-box");

// ポップオーバーの表示状態を切り替える処理
function toggleEscClosePopover(){

  // 現在ポップオーバーが表示されているか確認
  const isOpen =
    escClosePopoverBox.classList.contains("is-open");

  // 現在の状態と反対になるように表示用クラスを切り替える
  escClosePopoverBox.classList.toggle(
    "is-open",
    !isOpen
  );

  // ボタンの展開状態を表示状態に合わせて更新する
  escClosePopoverButton.setAttribute(
    "aria-expanded",
    String(!isOpen)
  );

  // ポップオーバーの非表示状態を表示状態に合わせて更新する
  escClosePopoverBox.setAttribute(
    "aria-hidden",
    String(isOpen)
  );

}

// ポップオーバーを閉じる処理
function closeEscClosePopover(){

  // 表示用クラスを削除する
  escClosePopoverBox.classList.remove("is-open");

  // ボタンの展開状態を閉じた状態へ変更する
  escClosePopoverButton.setAttribute(
    "aria-expanded",
    "false"
  );

  // ポップオーバーを非表示状態へ変更する
  escClosePopoverBox.setAttribute(
    "aria-hidden",
    "true"
  );

}

// 表示切り替えボタンをクリックしたとき
escClosePopoverButton.addEventListener("click",function(){

  // ポップオーバーの表示状態を切り替える
  toggleEscClosePopover();

});

// キーボードのキーを押したとき
document.addEventListener("keydown",function(event){

  // ESCキー以外の場合は処理を終了する
  if(event.key!=="Escape"){
    return;
  }

  // ESCキーが押されたらポップオーバーを閉じる
  closeEscClosePopover();

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでポップオーバーのレイアウトを作成し、CSSで見た目や表示アニメーションを設定し、JavaScriptでボタンによる表示切り替えとESCキーによる閉じる処理を行います。

ボタンをクリックするとポップオーバーが表示され、再度ボタンをクリックすると閉じます。また、キーボードのESCキーを押すとポップオーバーが閉じます。外側クリックでは閉じない仕様になっているため、ESCキーによる閉じる処理だけを確認できるシンプルなサンプルです。

各ファイルは役割ごとに分かれているため、デザインだけを変更したい場合はstyle.css、表示する文章を変更したい場合はindex.html、動作を変更したい場合はscript.jsを編集するだけでカスタマイズできます。初心者でも管理しやすい構成になっています。

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

各ファイルの役割
index.htmlはポップオーバーのレイアウトを作成するファイルです。タイトルや説明文、ボタンの文字、ポップオーバー内に表示する文章を変更できます。

style.cssはデザインを設定するファイルです。ボタンやポップオーバーの色、横幅、余白、角丸、影、表示位置、アニメーションなどを自由に変更できます。

script.jsはポップオーバーの動作を管理するファイルです。ボタンを押したときの表示切り替えと、ESCキーを押したときにポップオーバーを閉じる処理を実装しています。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。

配置後はsampleフォルダ内のindex.htmlをブラウザで開くだけで利用できます。

「ポップオーバーを表示」ボタンをクリックするとポップオーバーが表示されます。表示中にもう一度ボタンをクリックすると閉じます。また、キーボードのESCキーを押すとポップオーバーを閉じることができます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、ポップオーバー内の文章を変更できます。

style.cssではボタンやポップオーバーの色、横幅、余白、角丸、影、表示位置、文字サイズ、アニメーション時間などを変更できます。

script.jsではボタンをクリックしたときの表示切り替えや、ESCキーで閉じる動作を編集できます。

数値調整
style.cssのmax-width:700pxは全体の最大横幅です。値を大きくするとレイアウト全体が横に広がります。

style.cssのwidth:300pxはポップオーバーの横幅です。値を変更するとポップオーバーの大きさが変わります。

style.cssのpadding:32px、18pxは内側の余白です。値を大きくすると要素内の余白が広がります。

style.cssのborder-radius:18px、14px、10pxは角丸の大きさです。値を変更すると丸みが変わります。

style.cssのtop:calc(100% + 18px)はボタンとポップオーバーの間隔です。値を変更すると表示位置が上下に移動します。

style.cssのtransition:0.3sはアニメーション時間です。0.3秒で表示・非表示が切り替わります。値を大きくするとゆっくり、小さくすると速くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応しています。

style.cssではwidth:100%、max-width、calc(100vw – 40px)、media queryを利用し、画面サイズに応じてレイアウトが調整されます。

スマートフォンではボタンとポップオーバーが横幅いっぱいに表示され、タブレット・PCでも見やすいレイアウトのまま利用できます。