モーダルウインドウ内にモーダルウインドウを表示する方法
モーダルウインドウ内にモーダルウインドウを表示する方法を紹介します。最初のモーダルを開いた状態から、さらに別のモーダルウインドウを重ねて表示できるサンプルです。確認画面や詳細情報、注意事項などを段階的に表示したい場面で利用できます。
サンプルはHTML・CSS・JavaScriptのみで実装しており、1つ目のモーダル内のボタンをクリックすると2つ目のモーダルが表示されます。それぞれ独立して開閉できるため、複数の確認画面や補足情報を分かりやすく表示できます。背景やレイヤーも適切に管理しているため、どちらのモーダルが表示されているか迷わず操作できます。
管理画面や会員サイト、ECサイトなどで「詳細を確認する」「本当に実行しますか」といった段階的な確認画面を作りたい場合にも利用できます。タイトルやメッセージ、ボタン名は用途に合わせて自由に変更でき、さまざまな画面へ応用しやすい構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
1つ目のモーダルから2つ目のモーダルを表示できます。
「モーダルを開く」をクリックすると1つ目のモーダルが表示されます。その中の「次のモーダルを開く」をクリックすると、さらに2つ目のモーダルウインドウが表示されます。
コードをコピーして使おう！
<!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>
<!-- 1つ目のモーダルを開く操作エリア -->
<div class="modal-in-modal-window_wrap">
<!-- 操作エリアのタイトル -->
<div class="modal-in-modal-window_title">
モーダル内にモーダルを表示
</div>
<!-- 操作エリアの説明文 -->
<p class="modal-in-modal-window_text">
1つ目のモーダルから2つ目のモーダルを表示できます。
</p>
<!-- 1つ目のモーダルを開くボタン -->
<button
class="modal-in-modal-window_button"
type="button"
data-modal-in-modal-open-first>
モーダルを開く
</button>
</div>
<!-- 1つ目のモーダル背景 -->
<div
class="modal-in-modal-window_overlay"
data-modal-in-modal-first>
<!-- 1つ目のモーダル本体 -->
<div
class="modal-in-modal-window_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-in-modal-first-title">
<!-- 1つ目のモーダルタイトル -->
<div
class="modal-in-modal-window_modal-title"
id="modal-in-modal-first-title">
1つ目のモーダル
</div>
<!-- 1つ目のモーダル説明文 -->
<p class="modal-in-modal-window_modal-text">
このモーダル内からさらに別のモーダルを表示できます。
</p>
<!-- 2つ目のモーダルを開く操作エリア -->
<div class="modal-in-modal-window_inner">
<!-- 2つ目のモーダルを開くボタン -->
<button
class="modal-in-modal-window_button"
type="button"
data-modal-in-modal-open-second>
次のモーダルを開く
</button>
</div>
<!-- 1つ目のモーダルを閉じるボタン -->
<button
class="modal-in-modal-window_close"
type="button"
data-modal-in-modal-close-first>
閉じる
</button>
</div>
</div>
<!-- 2つ目のモーダル背景 -->
<div
class="modal-in-modal-window_overlay-second"
data-modal-in-modal-second>
<!-- 2つ目のモーダル本体 -->
<div
class="modal-in-modal-window_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-in-modal-second-title">
<!-- 2つ目のモーダルタイトル -->
<div
class="modal-in-modal-window_modal-title"
id="modal-in-modal-second-title">
2つ目のモーダル
</div>
<!-- 2つ目のモーダル説明文 -->
<p class="modal-in-modal-window_modal-text">
モーダルウインドウ内から表示されたモーダルです。
</p>
<!-- 2つ目のモーダルを閉じるボタン -->
<button
class="modal-in-modal-window_close"
type="button"
data-modal-in-modal-close-second>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは1つ目と2つ目のモーダルウインドウ、各モーダルを開閉するボタンを配置します。CSSではモーダル本体やオーバーレイのデザイン、表示位置、重なり順などを設定し、JavaScriptではボタン操作に合わせてそれぞれのモーダルを開閉します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはモーダルウインドウ全体を構成するファイルです。最初の「モーダルを開く」ボタン、1つ目のモーダル、その中から2つ目のモーダルを表示する「次のモーダルを開く」ボタン、各モーダルのタイトルや説明文、閉じるボタンを配置しています。タイトルや説明文、ボタンの文字を変更する場合はindex.htmlを編集します。
style.cssはモーダルウインドウの見た目を設定するファイルです。操作エリアの横幅や余白、ボタンの色や角丸、モーダル本体の横幅、背景色、影、オーバーレイの色などを変更できます。また、1つ目と2つ目のオーバーレイに異なるz-indexを指定し、2つ目のモーダルが1つ目より前面へ表示されるようにしています。
script.jsは2つのモーダルウインドウを開閉するファイルです。各ボタンがクリックされたときにis-activeクラスを追加または削除し、モーダルの表示状態を切り替えます。1つ目のモーダルを閉じる場合は、2つ目のモーダルにも付いているis-activeクラスを削除してから1つ目を閉じる構成です。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。
「モーダルを開く」をクリックすると1つ目のモーダルウインドウが表示されます。1つ目のモーダル内にある「次のモーダルを開く」をクリックすると、その上へ2つ目のモーダルウインドウが表示されます。2つ目の「閉じる」をクリックすると2つ目だけが閉じ、1つ目のモーダルへ戻ります。
カスタマイズできる内容
index.htmlでは、操作エリアのタイトルと説明文、1つ目・2つ目のモーダルタイトル、説明文、各ボタンに表示する文字を変更できます。モーダル内へ表示する文章を用途に合わせて変更する場合はindex.htmlを編集してください。
style.cssでは、操作エリアとモーダル本体の横幅、余白、背景色、文字サイズ、ボタンの色、角丸、モーダルの影を変更できます。.modal-in-modal-window_overlayと.modal-in-modal-window_overlay-secondではオーバーレイの背景色を変更でき、2つのモーダルを視覚的に区別できます。
script.jsでは、1つ目と2つ目のモーダルにis-activeクラスを追加・削除することで表示状態を切り替えています。2つ目を閉じた場合は1つ目を残し、1つ目を閉じた場合は2つ目も閉じる処理になっています。
数値調整
style.css
max-width:700px;
最初の操作エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
操作エリアの上下余白です。40pxを大きくすると上下の間隔が広がります。
padding:32px;
操作エリアの内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
操作エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:12px 24px;
モーダルを開くボタンと閉じるボタンの内側余白です。12pxが上下、24pxが左右の余白を表します。
background:rgba(0,0,0,.55);
1つ目のモーダルのオーバーレイです。.55を大きくすると背景が濃くなり、小さくすると薄くなります。
background:rgba(0,0,0,.65);
2つ目のモーダルのオーバーレイです。.65を変更すると、2つ目のモーダル表示時に背景を覆う暗さが変わります。
z-index:9998;とz-index:9999;
2つのモーダル背景の重なり順です。2つ目に大きな値を指定することで、1つ目のモーダルより前面へ表示しています。
max-width:420px;
モーダル本体の最大横幅です。値を大きくするとモーダルが横に広がり、小さくするとコンパクトになります。
padding:28px;
モーダル本体の内側余白です。値を大きくすると内容とモーダル端の間隔が広がります。
box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダル本体の影です。20pxや40pxを変更すると、影の位置や広がりを調整できます。
margin-top:20px;
2つ目のモーダルを開くボタンや閉じるボタンの上側余白です。値を大きくすると前の要素との間隔が広がります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。モーダル本体へwidth:100%とmax-width:420pxを指定し、オーバーレイにはpadding:20pxを設定しているため、画面幅が狭い場合でも画面端との余白を保ちながらモーダルが縮小されます。
また、style.cssの@media (max-width:640px)では、操作エリアとモーダル本体の内側余白をpadding:24px 18px;へ変更しています。これにより、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
コメント