フェードイン・フェードアウトで開閉するモーダルウインドウの作り方
フェードイン・フェードアウトで開閉するモーダルウインドウの作り方を紹介します。モーダルを開くときは透明な状態から徐々に表示され、閉じるときは少しずつ透明になりながら非表示になります。急に表示が切り替わる基本モーダルよりも自然な開閉動作を実現でき、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・JavaScriptの3ファイルで構成されています。HTMLでモーダルウインドウの画面構成を作成し、CSSでフェードイン・フェードアウトの開閉アニメーションやデザインを設定、JavaScriptでモーダルの表示・非表示を制御しています。
モーダルを開くと透明な状態から徐々に表示され、閉じると少しずつ透明になって非表示になります。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では、モーダルの横幅、背景色、文字色、余白、角丸、影、ボタンの色、背景オーバーレイの濃さを変更できます。
・style.cssの「opacity」を変更すると、フェードイン開始時とフェードアウト終了時の透明度を調整できます。
・script.jsでは、モーダルを表示する処理と、フェードアウト終了後に非表示にする処理を編集できます。
数値調整
・style.cssの「animation:modal-open-close-fade_in .4s ease forwards;」と「animation:modal-open-close-fade_out .4s ease forwards;」の「.4s」は0.4秒を表します。値を大きくするとゆっくり、小さくすると速くフェードします。
・script.jsの「setTimeout(…,400);」の「400」は400ミリ秒（0.4秒）を表します。CSSのアニメーション時間と同じ値に設定してください。値を変更するとモーダルを非表示にするタイミングが変わります。
・style.cssの「max-width:420px;」を変更するとモーダルの最大横幅が変わります。
・style.cssの「background:rgba(15,23,42,.55);」の「.55」を変更すると、背景オーバーレイの濃さが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでモーダル本体に「width:100%;」「max-width:420px;」を設定し、背景オーバーレイに「padding:20px;」を指定しているため、画面幅に応じてモーダルのサイズと画面端の余白が自動調整されます。また、画面幅640px以下ではメディアクエリで表示エリアの余白を「24px 18px」に変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント