ズームイン・ズームアウトで開閉するモーダルウインドウの作り方
ズームイン・ズームアウトで開閉するモーダルウインドウの作り方を紹介します。モーダルを開くときは少し小さい状態から拡大しながら表示され、閉じるときは徐々に縮小しながら非表示になります。表示と終了の両方にアニメーションを付けることで、自然で滑らかなモーダル演出を実装できます。HTML・CSS・JavaScriptだけで構成しているため、外部ライブラリを使わずに導入できます。
サンプルコードでは、「モーダルを開く」ボタンをクリックするとズームインアニメーションでモーダルを表示し、「閉じる」ボタンをクリックするとズームアウトアニメーションで閉じます。開く・閉じる両方のアニメーション時間はCSSから変更できるため、サイトの雰囲気に合わせて動きを調整することも可能です。
お問い合わせ画面や管理画面、会員サイト、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-zoom_wrap">
<!-- タイトル -->
<h1 class="modal-open-close-zoom_title">
ズームイン・ズームアウト
</h1>
<!-- 説明文 -->
<p class="modal-open-close-zoom_text">
モーダルを開くと拡大しながら表示され、閉じると縮小しながら閉じます。
</p>
<!-- モーダルを開くボタン -->
<button class="modal-open-close-zoom_open" type="button" data-zoom-modal-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div class="modal-open-close-zoom_overlay" data-zoom-modal-overlay>
<!-- モーダル本体 -->
<div class="modal-open-close-zoom_modal" role="dialog" aria-modal="true" aria-labelledby="zoom-modal-title" data-zoom-modal>
<!-- モーダルタイトル -->
<h2 class="modal-open-close-zoom_modal-title" id="zoom-modal-title">
モーダルタイトル
</h2>
<!-- モーダル本文 -->
<p class="modal-open-close-zoom_modal-text">
ズームイン・ズームアウトによる開閉アニメーションを確認できます。
</p>
<!-- モーダルを閉じるボタン -->
<button class="modal-open-close-zoom_close" type="button" data-zoom-modal-close>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルは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ファイルを配置します。
③ index.htmlをブラウザで開きます。
④ 「モーダルを開く」をクリックするとズームインしながら表示され、「閉じる」をクリックするとズームアウトしながら閉じる動作を確認できます。
カスタマイズできる内容
・index.htmlでは、ボタン名・モーダルタイトル・本文を自由に変更できます。
・style.cssでは、モーダルの色・幅・余白・角丸・影・背景色などのデザインを変更できます。
・style.cssの「max-width:420px;」を変更するとモーダルの横幅を調整できます。
・style.cssの「transform:scale(.8);」を変更すると、アニメーション開始時・終了時の拡大率を変更できます。
・script.jsでは、開閉処理やアニメーション終了後の動作を自由に変更できます。
数値調整
・style.cssの「animation:0.35s」はアニメーション時間です。値を大きくするとゆっくり、小さくすると速く開閉します。
・script.jsの「350」は0.35秒を表しています。CSSのアニメーション時間と同じ値に設定してください。変更するとモーダルを非表示にするタイミングが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」「padding:20px;」を設定しているため、画面サイズに応じてモーダルのサイズや余白が自動調整されます。スマートフォン・タブレット・PCでもレイアウトが崩れにくく、そのまま利用できます。
コメント