×ボタンで閉じられるモーダルウインドウの作り方
モーダルウインドウでは、内容を確認したあとに画面を閉じるための操作が必要です。今回は、モーダルウインドウの右上に「×」ボタンを配置し、クリックするとモーダルを閉じられる基本的な仕組みをHTML・CSS・JavaScriptで作成します。
「モーダルを開く」ボタンをクリックすると画面中央にモーダルウインドウが表示され、右上に配置した「×」ボタンをクリックすると非表示になります。JavaScriptでは表示用クラスの追加と削除だけを行うシンプルな構成にしているため、モーダルの基本的な開閉処理を確認しながら実装できます。
お知らせや確認メッセージ、補足情報、商品やサービスの詳細表示など、限られたスペースに追加情報を表示したい場面で利用できます。今回は×ボタンで閉じる操作に絞り、ESCキーやモーダルの外側クリックなど、ほかの閉じる方法は追加していません。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「モーダルを開く」をクリックしてモーダルを表示し、右上の「×」をクリックすると閉じる動作を確認できます。
コードをコピーして使おう！
<!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-x-button-modal-window_wrap">
<!-- 操作エリアのタイトル -->
<div class="close-x-button-modal-window_title">
×ボタンで閉じられるモーダルウインドウ
</div>
<!-- 操作エリアの説明文 -->
<p class="close-x-button-modal-window_text">
「モーダルを開く」をクリックすると、画面中央にモーダルウインドウが表示されます。
</p>
<!-- モーダルを開くボタン -->
<button class="close-x-button-modal-window_open" type="button" data-x-modal-open>
モーダルを開く
</button>
</div>
<!-- モーダル本体 -->
<div
class="close-x-button-modal-window_modal"
role="dialog"
aria-modal="true"
aria-labelledby="close-x-button-modal-window-title"
data-x-modal>
<!-- ×ボタン -->
<button
class="close-x-button-modal-window_close"
type="button"
data-x-modal-close
aria-label="モーダルを閉じる">
×
</button>
<!-- モーダルタイトル -->
<div class="close-x-button-modal-window_modal-title" id="close-x-button-modal-window-title">
モーダルタイトル
</div>
<!-- モーダル本文 -->
<p class="close-x-button-modal-window_modal-text">
右上の「×」ボタンをクリックすると、モーダルウインドウを閉じることができます。
</p>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではモーダルを開くボタン、モーダル本体、右上の「×」ボタンを配置します。CSSでは操作エリアやモーダル本体、×ボタンのサイズや位置などを設定し、JavaScriptではモーダルの表示と×ボタンによる非表示を制御します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはモーダルウインドウ全体を構成するファイルです。「モーダルを開く」ボタン、モーダルタイトル、本文、右上の「×」ボタンを配置しています。表示するタイトルや文章、ボタンの文字を変更できます。
style.cssは操作エリアとモーダルウインドウのデザインを設定するファイルです。全体の横幅、余白、背景色、角丸、モーダルの横幅や影、×ボタンの大きさや位置などを変更できます。
script.jsはモーダルウインドウの表示・非表示を制御するファイルです。「モーダルを開く」ボタンをクリックするとis-activeクラスを追加してモーダルを表示し、右上の「×」ボタンをクリックするとis-activeクラスを削除してモーダルを閉じます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsが読み込まれます。「モーダルを開く」ボタンをクリックすると画面中央にモーダルウインドウが表示され、右上の「×」ボタンをクリックすると閉じることができます。
カスタマイズできる内容
index.htmlでは「×ボタンで閉じられるモーダルウインドウ」のタイトル、操作エリアの説明文、「モーダルを開く」のボタン文字、モーダルタイトル、モーダル本文を変更できます。用途に合わせて、お知らせ、確認メッセージ、補足情報などの内容へ変更できます。
style.cssでは操作エリアの最大横幅や余白、背景色、角丸、モーダル本体の最大横幅、内側余白、角丸、影などを変更できます。右上の×ボタンについても、配置位置、大きさ、背景色、文字色、×印の文字サイズを調整できます。
数値調整
style.css
padding:40px 20px;
ページ全体の余白です。上下の40pxを大きくすると上下の余白が広がり、左右の20pxを大きくすると画面端との間隔が広がります。
max-width:700px;
操作エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
操作エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。autoによって左右中央へ配置されます。
padding:32px;
操作エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
操作エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
操作エリアのタイトル文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 24px;
操作エリアの説明文の下側余白です。24pxを大きくすると「モーダルを開く」ボタンとの間隔が広がり、小さくすると狭くなります。
padding:12px 24px;
「モーダルを開く」ボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の24pxを大きくすると横に広がります。
border-radius:8px;
「モーダルを開く」ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:16px;
「モーダルを開く」ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
top:50%;・left:50%;
モーダル本体を画面中央へ配置するための位置です。transform:translate(-50%,-50%);と組み合わせて、モーダルの中心が画面の中央に合うようにしています。
width:calc(100% - 40px);
モーダル本体の横幅です。画面幅から40pxを引くことで、画面が狭い場合でも左右に合計40pxの余白を確保します。40pxを大きくすると画面端との余白が広がり、小さくするとモーダルを広く表示できます。
max-width:420px;
モーダル本体の最大横幅です。値を大きくするとモーダルが横に広がり、小さくするとコンパクトになります。
padding:28px;
モーダル本体の内側余白です。値を大きくすると内容とモーダル端の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
モーダル本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダル本体の影です。20pxは影の上下位置、40pxはぼかしの広がりです。数値を大きくすると影が下方向へ移動したり、より広くぼかされた表示になります。
top:14px;・right:14px;
×ボタンをモーダル右上へ配置する位置です。topの14pxを大きくすると下へ移動し、rightの14pxを大きくすると左へ移動します。
width:40px;・height:40px;
×ボタンの大きさです。2つを同じ値にすると円形を維持できます。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。
border-radius:50%;
×ボタンを円形にする設定です。50%にすることで、同じ横幅と高さを持つボタンを円形で表示します。
font-size:24px;
×印の文字サイズです。値を大きくすると×印が大きくなり、小さくすると小さくなります。
padding:0 44px;
モーダルタイトルの左右余白です。右上の×ボタンとタイトルが重なりにくくするための余白で、44pxを大きくすると左右の余白が広がります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:calc(100% - 40px)とmax-width:420pxにより、モーダル本体は画面幅が狭くなると左右に余白を残しながら縮小されます。また、640px以下ではメディアクエリを適用し、操作エリアのpaddingを24px 18px、モーダル本体のpaddingも24px 18pxへ変更しています。画面幅に合わせて内側余白が小さくなるため、スマートフォン・タブレット・PCで利用できます。
コメント