フェードイン・フェードアウトで開閉するモーダルウインドウの作り方
フェードイン・フェードアウトで開閉するモーダルウインドウの作り方を紹介します。このサンプルでは、「モーダルを開く」をクリックするとモーダルウインドウが徐々に表示され、「閉じる」をクリックすると徐々に透明になってから非表示になります。基本のモーダルウインドウの構成をそのまま使用し、CSSのopacityとtransition、JavaScriptによるクラスの切り替えを追加して開閉時のフェードアニメーションを実装します。
お問い合わせページの案内、会員サイトのお知らせ、ECサイトの商品説明、管理画面の確認メッセージなど、画面中央へ情報を表示するときに利用できます。瞬時に表示・非表示を切り替える基本形と比べて、モーダルが徐々に現れて徐々に消えるため、開閉の変化を視覚的に確認しやすくなります。背景を暗くするオーバーレイやぼかし、外側クリック、×ボタンなどは追加していません。
HTMLではモーダルのタイトルや本文を変更でき、CSSではモーダルの横幅、余白、角丸、影、フェードにかかる時間などを調整できます。JavaScriptでは開くボタンと閉じるボタンをクリックしたときに表示状態を管理するクラスを切り替えます。640px以下では表示エリアとモーダルの内側余白を小さくするため、スマートフォン・タブレット・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="modal-open-close-fade_wrap">
<!-- タイトル -->
<div class="modal-open-close-fade_title">
フェード開閉モーダル
</div>
<!-- 説明文 -->
<p class="modal-open-close-fade_text">
モーダルを開くと徐々に表示され、閉じると徐々に透明になります。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-open-close-fade_open"
type="button"
data-modal-open-close-fade-open="">
モーダルを開く
</button>
</div>
<!-- モーダルウインドウ -->
<div
class="modal-open-close-fade_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-open-close-fade-title"
data-modal-open-close-fade-modal="">
<!-- モーダルタイトル -->
<div
class="modal-open-close-fade_modal-title"
id="modal-open-close-fade-title">
モーダルタイトル
</div>
<!-- モーダル本文 -->
<p class="modal-open-close-fade_modal-text">
フェードイン・フェードアウトによる開閉アニメーションを確認できます。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="modal-open-close-fade_close"
type="button"
data-modal-open-close-fade-close="">
閉じる
</button>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。基本のモーダルウインドウと同じく、開くボタンをクリックすると画面中央へモーダルを表示し、モーダル内の「閉じる」をクリックすると非表示にします。基本形の構造やデザインはそのまま使用し、CSSのopacityとtransitionを追加することで、開くときはフェードイン、閉じるときはフェードアウトする動作を実装しています。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはモーダルウインドウ全体を構成するファイルです。「モーダルを開く」ボタン、モーダルのタイトル・本文、「閉じる」ボタンを配置しています。index.htmlからstyle.cssとscript.jsを読み込んで使用します。
style.cssは表示エリア、開くボタン、モーダルウインドウ、閉じるボタンのデザインとフェードアニメーションを設定するファイルです。モーダルは初期状態でvisibility:hidden;とopacity:0;にし、is-activeクラスが追加されるとvisibility:visible;とopacity:1;へ変化します。transitionによって透明度が徐々に変化するため、表示時と非表示時の両方でフェードします。背景を暗くするオーバーレイやぼかしは設定していません。
script.jsはモーダルの表示状態を切り替えるファイルです。「モーダルを開く」をクリックするとis-activeクラスを追加し、「閉じる」をクリックすると同じクラスを削除します。フェードそのものはCSSで処理しているため、JavaScriptでは基本形と同じようにクラスの追加と削除だけを行います。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込む構成になっています。「モーダルを開く」をクリックするとモーダルウインドウが画面中央へフェードインし、「閉じる」をクリックするとフェードアウトしながら非表示になります。
カスタマイズできる内容
index.htmlでは表示エリアのタイトル・説明文、モーダルのタイトル・本文、開くボタンと閉じるボタンの文字を変更できます。style.cssでは表示エリアやモーダルの横幅、余白、背景色、角丸、影、ボタンのデザインを変更できます。また、transitionの時間を変更することでフェードイン・フェードアウトの速さを調整できます。
数値調整
style.css
max-width:700px;
表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
表示エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
表示エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border:1px solid #e5e7eb;
表示エリアの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:18px;
表示エリアとモーダルウインドウの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
表示エリアとモーダルのタイトル文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
padding:12px 24px;
「モーダルを開く」ボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の24pxを大きくすると横に広がります。
font-size:16px;
「モーダルを開く」ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
top:50%;・left:50%;
モーダルを画面中央へ配置するための位置です。transform:translate(-50%,-50%);と組み合わせて縦横中央へ配置しています。
z-index:9999;
モーダルウインドウの重なり順です。値を大きくすると、より高い重なり順として扱われます。
width:calc(100% - 40px);
モーダルウインドウの横幅です。40pxを大きくすると画面左右の余白が広がり、モーダルの横幅は狭くなります。
max-width:420px;
モーダルウインドウの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:28px;
モーダルウインドウの内側余白です。値を大きくすると内容と外周の間隔が広がり、小さくすると狭くなります。
box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダルウインドウの影です。20pxを大きくすると影が下方向へ移動し、40pxを大きくすると影のぼかしが広がります。
opacity:0;・opacity:1;
モーダルの透明度です。0で完全に透明になり、1で完全に表示されます。この値の変化を利用してフェードイン・フェードアウトを行います。
transition:opacity .4s ease, visibility .4s ease;
フェードにかかる時間です。.4sは0.4秒を表し、値を大きくするとゆっくりフェードし、小さくすると速く切り替わります。
padding:10px 20px;
「閉じる」ボタンの内側余白です。上下の10pxを大きくするとボタンが高くなり、左右の20pxを大きくすると横に広がります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって表示エリアが画面幅に合わせて縮小されます。モーダルはwidth:calc(100% - 40px)とmax-width:420pxによって画面幅に合わせて調整されます。また、640px以下では表示エリアとモーダルのpaddingを24px 18pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント