フェードイン・フェードアウトで開閉するモーダルウインドウの作り方
フェードイン・フェードアウトで開閉するモーダルウインドウの作り方を紹介します。モーダルを開くときは透明な状態から徐々に表示され、閉じるときは少しずつ透明になりながら非表示になります。急に表示が切り替わる基本モーダルよりも自然な開閉動作を実現でき、HTML・CSS・JavaScriptだけで実装できます。
このサンプルでは、「モーダルを開く」ボタンをクリックするとフェードインアニメーションが実行され、「閉じる」ボタンをクリックするとフェードアウトアニメーションが実行されます。CSSで透明度とアニメーション時間を設定し、JavaScriptでは閉じるアニメーションが終了してからモーダル全体を非表示にします。
お問い合わせ画面、会員サイト、ECサイトの確認画面、管理画面のお知らせなど、一時的な情報を落ち着いた演出で表示したい場面に利用できます。モーダル内のタイトルや本文、ボタンの文字はHTMLで変更でき、色・幅・余白・角丸・影・フェード時間はCSSから調整できます。シンプルな構成なので、初心者でも導入しやすい開閉アニメーション付きモーダルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
モーダルを開くと徐々に表示され、閉じると徐々に透明になります。
「モーダルを開く」をクリックするとフェードインで表示され、「閉じる」をクリックするとフェードアウトしながら閉じます。
コードをコピーして使おう！
<!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">
<!-- タイトル -->
<h1 class="modal-open-close-fade_title">
フェード開閉モーダル
</h1>
<!-- 説明文 -->
<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_overlay"
data-modal-open-close-fade-overlay>
<!-- モーダル本体 -->
<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>
<!-- モーダルタイトル -->
<h2
class="modal-open-close-fade_modal-title"
id="modal-open-close-fade-title">
モーダルタイトル
</h2>
<!-- モーダル本文 -->
<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>
</div>
<!-- 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はモーダルの見た目とアニメーションを設定するファイルです。背景色、余白、角丸、影、フェードイン・フェードアウトの時間などを変更できます。
script.jsはモーダルの表示・非表示を制御するファイルです。開くボタンでモーダルを表示し、閉じるボタンではフェードアウト終了後にモーダルを非表示へ切り替えます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「モーダルを開く」をクリックするとフェードインで表示され、「閉じる」をクリックするとフェードアウトしながら閉じる動作を確認できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、モーダル内の見出しや本文を変更できます。確認画面、お知らせ、案内メッセージなど用途に合わせて編集できます。
style.cssではモーダル本体の横幅、背景色、角丸、余白、影、背景オーバーレイの色や濃さ、フェードイン・フェードアウトの時間を変更できます。アニメーションの見た目も用途に合わせて調整できます。
script.jsではモーダルを開く・閉じる処理や、フェードアウト完了後に非表示へ切り替える待機時間を変更できます。
数値調整
style.css
max-width:700px;
デモ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
デモ全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
max-width:420px;
モーダル本体の最大横幅です。値を大きくすると広くなり、小さくすると細く表示されます。
padding:28px;
モーダル本体の内側余白です。値を大きくすると余裕が生まれ、小さくするとコンパクトになります。
border-radius:18px;
モーダル本体の角丸です。値を大きくすると丸みが強くなり、小さくすると四角に近づきます。
animation:.4s;
フェードイン・フェードアウトの時間です。値を大きくするとゆっくり、小さくすると速くなります。
script.js
setTimeout(...,400);
フェードアウト後にモーダルを非表示にする待機時間です。CSSのアニメーション時間と同じ値に設定してください。値を変更する場合はCSSの.4sも合わせて変更します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより画面幅に合わせてモーダルが縮小されます。また、640px以下ではpadding:24px 18px;へ変更して余白を調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント