ページを移動しても開閉状態を記憶するモーダルウインドウの作り方
ページを移動しても開閉状態を記憶するモーダルウインドウの作り方を紹介します。このサンプルでは、モーダルウインドウを開いた状態で別のページへ移動しても、移動先で開いた状態を復元できます。「閉じる」ボタンでモーダルを閉じた場合は閉じた状態が保存されるため、利用者が最後に操作した開閉状態を維持できます。
HTML・CSS・JavaScriptだけで実装し、開閉状態の保存にはブラウザのlocalStorageを使用します。「モーダルを開く」をクリックすると開いた状態を保存し、「閉じる」をクリックすると閉じた状態へ更新します。ページが読み込まれたときに保存済みの状態を確認することで、ページ移動後でもモーダルウインドウの開閉状態を自動的に復元します。
複数ページにまたがって同じ案内や設定画面を表示する会員サイト、管理画面、ECサイトなどで利用できます。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="remember-modal-window-state_wrap">
<!-- タイトル -->
<div class="remember-modal-window-state_title">
開閉状態を記憶するモーダルウインドウ
</div>
<!-- 説明文 -->
<p class="remember-modal-window-state_text">
モーダルの開閉状態をブラウザへ保存します。
</p>
<!-- モーダルを開くボタン -->
<button
class="remember-modal-window-state_open"
type="button"
data-remember-modal-open>
モーダルを開く
</button>
</div>
<!-- モーダル本体 -->
<div
class="remember-modal-window-state_modal"
role="dialog"
aria-modal="true"
aria-labelledby="remember-modal-window-state-title"
data-remember-modal>
<!-- モーダルタイトル -->
<div
class="remember-modal-window-state_modal-title"
id="remember-modal-window-state-title">
モーダルタイトル
</div>
<!-- モーダル本文 -->
<p class="remember-modal-window-state_modal-text">
このモーダルウインドウの開閉状態はブラウザへ保存されます。閉じるボタンをクリックするとモーダルを閉じます。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="remember-modal-window-state_close"
type="button"
data-remember-modal-close>
閉じる
</button>
</div>
<!-- 補足説明 -->
<p class="remember-modal-window-state_description">
モーダルを開いたあとにページを再読み込みしたり、別のページへ移動して戻ったりしても、最後の開閉状態が復元されます。
</p>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではモーダルウインドウを開くボタン、モーダル本体、タイトル、本文、閉じるボタンを作成します。CSSではモーダルを画面中央へ固定表示し、横幅、余白、背景色、角丸、影などを設定します。JavaScriptではモーダルの開閉とlocalStorageへの状態保存を行い、ページを移動したあとや再読み込みしたあとでも最後の開閉状態を復元します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはモーダルウインドウ全体を構成するファイルです。「開閉状態を記憶するモーダルウインドウ」のタイトル、説明文、「モーダルを開く」ボタン、モーダル内のタイトル、本文、「閉じる」ボタン、補足説明を変更できます。
style.cssは操作エリアとモーダルウインドウのデザインを設定するファイルです。操作エリアの横幅や余白、背景色、モーダルの最大横幅、配置位置、角丸、影、開くボタンと閉じるボタンの配色などを変更できます。モーダル本体は初期状態でdisplay:none;となっており、is-activeクラスが付いた場合だけ表示されます。
script.jsはモーダルウインドウの開閉状態を保存・復元するファイルです。「モーダルを開く」をクリックするとis-activeクラスを追加してopenをlocalStorageへ保存し、「閉じる」をクリックするとクラスを削除してclosedを保存します。ページ読み込み時には保存済みの値を取得し、openの場合はモーダルを開いた状態へ復元します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3ファイルを保存したあと、sample/index.htmlをブラウザで開いてください。
「モーダルを開く」をクリックすると、モーダルウインドウが画面中央に表示され、開いた状態がlocalStorageへ保存されます。モーダル内の「閉じる」をクリックするとモーダルが非表示になり、閉じた状態が保存されます。
モーダルを開いた状態でページを再読み込みした場合や、別のページへ移動してから戻った場合は、localStorageに保存されているopenを読み込んでモーダルが再び表示されます。閉じた状態で保存されている場合は、モーダルは表示されません。
カスタマイズできる内容
index.htmlでは操作エリアのタイトル、説明文、「モーダルを開く」のボタン文字、モーダル内のタイトル、本文、「閉じる」のボタン文字、補足説明を変更できます。用途に合わせて、お知らせ、確認内容、案内文などへ変更できます。
style.cssでは操作エリアの最大横幅、余白、背景色、角丸、モーダルの最大横幅、内側余白、背景色、影、ボタンの配色などを変更できます。モーダルはtop:50%、left:50%、transform:translate(-50%,-50%)によって画面中央へ配置されています。
script.jsではrememberModalWindowStateをlocalStorageの保存名として使用しています。この文字列を変更すると、開閉状態を保存するキー名を変更できます。
数値調整
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 16px、操作エリアとモーダルの内側余白を24px 18pxへ変更しています。スマートフォン・タブレット・PCで利用できます。
コメント