ESCキーで閉じられるモーダルウインドウの作り方
ESCキーで閉じられるモーダルウインドウの作り方を紹介します。モーダルウインドウを開いた状態でキーボードのESCキーを押すとモーダルを閉じるシンプルな実装です。管理画面やWebアプリなどでは、マウスだけでなくキーボード操作にも対応することで、より快適に利用できる画面を作成できます。本記事ではHTML・CSS・JavaScriptだけを使用し、ESCキーによる閉じる処理を実装します。
サンプルコードでは、「モーダルを開く」ボタンをクリックするとモーダルが表示され、ESCキーを押すとモーダルが閉じます。背景クリックや×ボタンによる終了処理は実装せず、ESCキーだけで閉じる構成にしているため、キーボードイベントの基本的な実装方法を理解しやすい内容です。シンプルなコードなので、そのまま他のモーダルへ組み込むこともできます。
会員サイトや管理画面、設定画面、業務システムなど、キーボード操作を重視するWebサイトで利用しやすいサンプルです。モーダル内のタイトルや説明文はHTMLから変更でき、色やサイズ、余白などのデザインはCSSから自由に調整できます。また、JavaScriptを編集すれば他のキー操作へ応用することもできるため、さまざまなモーダルウインドウのベースとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
モーダルを開いたあと、キーボードのESCキーを押して閉じる動作を確認できます。
「モーダルを開く」をクリックし、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="modal-esc-close_wrap">
<!-- タイトル -->
<h1 class="modal-esc-close_title">
ESCキーで閉じられるモーダルウインドウ
</h1>
<!-- 説明文 -->
<p class="modal-esc-close_text">
モーダルを開いたあと、キーボードのESCキーを押すと閉じます。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-esc-close_open"
type="button"
data-modal-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div
class="modal-esc-close_overlay"
data-modal-overlay>
<!-- モーダル本体 -->
<div
class="modal-esc-close_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-title">
<!-- モーダルタイトル -->
<h2
id="modal-title"
class="modal-esc-close_modal-title">
モーダルタイトル
</h2>
<!-- モーダル本文 -->
<p class="modal-esc-close_modal-text">
ESCキーを押すとモーダルウインドウを閉じます。
</p>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではモーダルウインドウのレイアウトを作成し、CSSではモーダルのデザインや表示位置、背景の暗転表示を設定します。JavaScriptではモーダルを開く処理と、キーボードのESCキーが押されたときにモーダルを閉じる処理を実装しています。シンプルな構成のため、初心者でも仕組みを理解しながら導入できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはモーダルウインドウ全体を構成するファイルです。タイトル、説明文、ボタンの文字、モーダル内のタイトルや本文を変更できます。
style.cssは画面全体とモーダルのデザインを設定するファイルです。背景色、余白、角丸、影、モーダルサイズ、ボタンのデザインなどを変更できます。
script.jsはモーダルを開く処理と、ESCキーを押したときにモーダルを閉じる処理を制御するファイルです。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「モーダルを開く」ボタンを押すとモーダルが表示されます。表示中にキーボードのESCキーを押すとモーダルを閉じることができます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、モーダル内のタイトルや本文を変更できます。
style.cssではモーダル全体の横幅、背景色、影、角丸、ボタンの色、文字サイズ、背景の暗さなどを自由に変更できます。
script.jsでは開閉処理や、ESCキーによる終了処理を用途に合わせて変更できます。
数値調整
style.css
max-width:700px;
デモ全体の最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。
padding:32px;
デモ全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
デモ全体とモーダル本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
max-width:420px;
モーダル本体の最大横幅です。値を変更するとモーダルの大きさが変わります。
padding:28px;
モーダル本体の内側余白です。値を大きくすると内容との間隔が広がり、小さくすると狭くなります。
background:rgba(15,23,42,.55);
モーダル表示時の背景の暗さです。最後の0.55を変更すると背景の透明度が変わります。値を大きくすると暗くなり、小さくすると明るくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより画面幅に合わせてモーダルが縮小表示されます。また、640px以下ではpadding:24px 18px;へ変更して余白を調整しているため、スマートフォン・タブレット・PCで快適に利用できます。
コメント