モーダルウインドウ内にモーダルウインドウを表示する方法
モーダルウインドウ内にモーダルウインドウを表示する方法を紹介します。最初のモーダルを開いた状態から、さらに別のモーダルウインドウを重ねて表示できるサンプルです。確認画面や詳細情報、注意事項などを段階的に表示したい場面で利用できます。
サンプルは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・JavaScriptの3ファイルで構成されています。HTMLには1つ目と2つ目のモーダルウインドウの構造、CSSには各モーダルや背景、ボタンのデザイン、JavaScriptにはモーダルを順番に開閉する処理を記述しています。1つ目のモーダルを表示した状態から、さらに2つ目のモーダルを前面へ重ねて表示できます。
1つ目のモーダル内にある「次のモーダルを開く」ボタンをクリックすると、2つ目のモーダルが1つ目より前面へ表示されます。2つ目のモーダルだけを閉じると1つ目のモーダルへ戻り、1つ目のモーダルを閉じると両方が非表示になります。
確認画面から詳細情報を表示する場合や、操作内容を確認した後に最終確認を重ねて表示する場合など、段階的な案内が必要な画面へ利用できます。各モーダルのタイトル、説明文、ボタン名、背景色、重なり順などはコード内で変更できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
1つ目のモーダルを開くボタン、1つ目と2つ目のモーダルウインドウ、各モーダルの閉じるボタンを管理します。タイトル、説明文、ボタン名を変更できます。
style.css
操作エリア、モーダル背景、モーダル本体、ボタン、余白、角丸、影、重なり順を管理します。2つ目のモーダルには1つ目より大きいz-indexを指定し、前面へ表示しています。
script.js
1つ目のモーダルを開く処理、2つ目のモーダルを開く処理、それぞれを閉じる処理を管理します。1つ目を閉じる際は、2つ目も同時に閉じる構成です。
設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置します。sample/index.htmlをブラウザで開き、「モーダルを開く」をクリックすると1つ目のモーダルが表示されます。その中の「次のモーダルを開く」をクリックすると、2つ目のモーダルが前面へ表示されます。
2つ目の「閉じる」をクリックすると2つ目だけが閉じ、1つ目のモーダルへ戻ります。1つ目の「閉じる」をクリックすると、表示中の2つ目のモーダルも含めて閉じます。
カスタマイズできる内容
index.htmlでは各モーダルのタイトル、説明文、開くボタンと閉じるボタンの表示内容を変更できます。style.cssではモーダルの横幅、背景色、ボタン色、余白、角丸、影、背景の濃さを変更できます。script.jsでは各ボタンをクリックしたときの開閉処理を編集できます。
数値調整
style.cssのmax-width:420px;を変更するとモーダルの最大横幅が変わります。padding:28px;を変更するとモーダル内部の余白が変わります。z-index:9998;とz-index:9999;はモーダルの重なり順を表し、値が大きい2つ目のモーダルが前面へ表示されます。background:rgba(0,0,0,.55);とbackground:rgba(0,0,0,.65);の小数値を変更すると背景の暗さが変わります。
レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@media(max-width:640px)を使用してレスポンシブ対応しています。スマートフォンでは操作エリアとモーダル内部の余白が小さくなり、画面幅に合わせて表示されます。タブレット・PCでは最大横幅を保った状態で画面中央に表示されます。
コメント