基本のモーダルウインドウを作る方法
基本のモーダルウインドウを作る方法を紹介します。このサンプルでは、「モーダルを開く」ボタンをクリックすると画面中央にモーダルウインドウが表示され、「閉じる」ボタンをクリックすると非表示になります。背景を覆うオーバーレイは使用せず、モーダル本体だけをシンプルに表示する構成です。
お知らせ、補足説明、確認内容、簡単な案内など、ページ内で一時的に内容を目立たせたい場面に利用できます。HTMLでモーダルのタイトル、本文、ボタンを用意し、CSSで横幅、余白、背景色、角丸、影などを設定します。JavaScriptでは表示用クラスを追加・削除することで、モーダルの開閉を切り替えます。
モーダルのタイトルや本文、開くボタン・閉じるボタンの文字はHTMLから変更でき、CSSではモーダルの最大横幅、内側余白、背景色、角丸、影、ボタンの配色などを調整できます。画面幅が狭い場合も横幅に合わせて縮小されるため、スマートフォン・タブレット・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="basic-modal-window_wrap">
<!-- タイトル -->
<div class="basic-modal-window_title">
基本モーダルウインドウ
</div>
<!-- 説明文 -->
<p class="basic-modal-window_text">
シンプルな構成で実装できる、基本的なモーダルウインドウの動作を確認できます。
</p>
<!-- モーダルを開くボタン -->
<button
class="basic-modal-window_open"
type="button"
data-modal-open>
モーダルを開く
</button>
</div>
<!-- モーダル本体 -->
<div
class="basic-modal-window_modal"
role="dialog"
aria-modal="true"
aria-labelledby="basic-modal-window-title"
data-modal>
<!-- モーダルタイトル -->
<div
class="basic-modal-window_modal-title"
id="basic-modal-window-title">
モーダルタイトル
</div>
<!-- モーダル本文 -->
<p class="basic-modal-window_modal-text">
これは基本的なモーダルウインドウです。閉じるボタンをクリックするとモーダルを閉じます。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="basic-modal-window_close"
type="button"
data-modal-close>
閉じる
</button>
</div>
<!-- 補足説明 -->
<p class="basic-modal-window_description">
「モーダルを開く」をクリックすると画面中央にモーダルが表示されます。「閉じる」をクリックするとモーダルを閉じる動作を確認できます。
</p>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではモーダルウインドウを開くボタン、モーダル本体、タイトル、本文、閉じるボタンを作成します。CSSではモーダルを画面中央へ固定表示し、横幅、余白、背景色、角丸、影などの見た目を整えます。JavaScriptでは表示用クラスを追加・削除して、モーダルウインドウの開閉を切り替えます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはモーダルウインドウ全体を構成するファイルです。「基本モーダルウインドウ」のタイトル、説明文、「モーダルを開く」ボタン、モーダル内のタイトル、本文、「閉じる」ボタン、補足説明を変更できます。
style.cssはモーダルウインドウと操作エリアのデザインを設定するファイルです。操作エリアの横幅や余白、モーダルの最大横幅、背景色、角丸、影、ボタンの配色などを変更できます。モーダル本体は初期状態ではdisplay:none;で非表示になっており、is-activeクラスが付くと表示されます。
script.jsはモーダルウインドウの開閉を行うファイルです。「モーダルを開く」をクリックするとモーダルへis-activeクラスを追加し、「閉じる」をクリックするとクラスを削除します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3ファイルを保存したあと、sample/index.htmlをブラウザで開いてください。
「モーダルを開く」をクリックすると、モーダルウインドウが画面中央へ表示されます。表示中のモーダル内にある「閉じる」をクリックすると非表示になります。このサンプルでは背景を覆うオーバーレイは使用せず、モーダル本体のみを表示します。
カスタマイズできる内容
index.htmlでは操作エリアのタイトル、説明文、開くボタンの文字、モーダル内のタイトル、本文、閉じるボタンの文字、補足説明を変更できます。お知らせ、確認内容、補足説明など、用途に合わせた文章へ変更できます。
style.cssでは操作エリアとモーダルの横幅、余白、背景色、文字色、角丸、影、ボタンの背景色などを変更できます。モーダルはtop:50%、left:50%、transform:translate(-50%,-50%)によって画面中央へ配置されています。
数値調整
style.css
padding:40px 20px;
ページ全体の余白です。40pxは上下、20pxは左右の余白です。値を大きくすると画面端との間隔が広がります。
max-width:700px;
操作エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
操作エリアの上下余白です。40pxを大きくすると上下の間隔が広がります。
padding:32px;
操作エリアの内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
操作エリアの角丸です。値を大きくすると丸みが強くなります。
padding:12px 24px;
「モーダルを開く」ボタンの内側余白です。12pxは上下、24pxは左右の余白です。
top:50%;・left:50%;
モーダルを画面中央へ配置する基準位置です。transform:translate(-50%,-50%)と組み合わせて中央表示します。
width:calc(100% - 40px);
モーダルの横幅です。画面幅から40pxを引くことで、左右に20pxずつ余白を確保します。
max-width:420px;
モーダルの最大横幅です。値を大きくすると横に広がり、小さくすると狭くなります。
padding:28px;
モーダル内側の余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
モーダル本体の角丸です。値を大きくすると丸みが強くなります。
box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダルの影です。20pxは縦方向の位置、40pxは影のぼかし、0.2は影の濃さです。値を変更すると影の位置や広がり、濃さが変わります。
margin:0 0 24px;
モーダル本文の下側余白です。24pxを大きくすると本文と閉じるボタンの間隔が広がります。
padding:10px 20px;
「閉じる」ボタンの内側余白です。10pxは上下、20pxは左右の余白です。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは操作エリアへwidth:100%とmax-width:700pxを指定し、モーダルにはwidth:calc(100% - 40px)とmax-width:420pxを指定しているため、画面幅に合わせて縮小されます。
また、画面幅640px以下では操作エリアの内側余白を24px 18px、モーダルの内側余白も24px 18pxへ変更しています。スマートフォン・タブレット・PCで利用できます。
コメント