上から表示・下へ閉じるモーダルウインドウの作り方
上から表示・下へ閉じるモーダルウインドウをHTML・CSS・JavaScriptだけで作る方法を紹介します。モーダルを開くと画面上部からスライドしながら表示され、閉じると下方向へスライドしながら画面外へ移動するアニメーションを実装できます。JavaScriptは表示・非表示の切り替えのみを担当し、アニメーションはCSSで実現しているため、シンプルな構成で導入できます。
お知らせ画面や確認ダイアログ、管理画面、会員サイト、ECサイトなど、ユーザーの注意を引きたい場面で利用しやすいモーダルです。ボタンから開閉できるため動作が分かりやすく、既存サイトにも組み込みやすい構成になっています。表示方向や閉じる方向を変えるだけで印象を大きく変えられるため、さまざまなデザインへ応用できます。
サンプルコードではモーダルのサイズや背景色、角丸、アニメーション時間などを自由に変更できます。レスポンシブにも対応しているため、スマートフォン・タブレット・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-slide-down-close_wrap">
<!-- タイトル -->
<div class="modal-slide-down-close_title">
上から表示・下へ閉じるモーダル
</div>
<!-- 説明文 -->
<p class="modal-slide-down-close_text">
モーダルは上からスライドして表示され、閉じると下へスライドして閉じます。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-slide-down-close_open"
type="button"
data-modal-slide-down-close-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div
class="modal-slide-down-close_overlay"
data-modal-slide-down-close-overlay>
<!-- モーダル本体 -->
<div
class="modal-slide-down-close_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-slide-down-close-title"
data-modal-slide-down-close-modal>
<!-- モーダルタイトル -->
<div
class="modal-slide-down-close_modal-title"
id="modal-slide-down-close-title">
モーダルタイトル
</div>
<!-- モーダル本文 -->
<p class="modal-slide-down-close_modal-text">
上から表示され、下へスライドして閉じるアニメーションを確認できます。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="modal-slide-down-close_close"
type="button"
data-modal-slide-down-close-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：モーダル表示エリア、タイトル、説明文、開くボタン、モーダル本体、閉じるボタンなど、画面に表示するHTMLを記述します。
・style.css：ページ全体、ボタン、背景オーバーレイ、モーダルの横幅・余白・角丸・影と、上から表示して下へ閉じるアニメーションを設定します。
・script.js：開くボタンと閉じるボタンのクリック処理を行い、閉じるアニメーション終了後にモーダルを非表示へ切り替えます。
設置方法・使い方
① sampleフォルダを作成します。
② index.html・style.css・script.jsの3ファイルをsampleフォルダへ配置します。
③ sample/index.htmlをブラウザで開きます。
④ 「モーダルを開く」をクリックすると、モーダルが上からスライドして表示されます。
⑤ 「閉じる」をクリックすると、モーダルが下へスライドしながら閉じます。
カスタマイズできる内容
・index.htmlでは、ページタイトル、表示エリアのタイトルと説明文、モーダルタイトル、モーダル本文、各ボタンの文字を変更できます。
・style.cssでは、表示エリアやモーダルの横幅、背景色、文字色、余白、角丸、影、ボタンの色、背景オーバーレイの濃さを変更できます。
・style.cssの「translateY(-120px)」を変更すると、モーダルが上から表示される移動距離を調整できます。
・style.cssの「translateY(120px)」を変更すると、モーダルが下へ閉じる移動距離を調整できます。
・style.cssの「max-width:420px;」を変更すると、モーダルの最大横幅を調整できます。
数値調整
・style.cssの「animation:modal-slide-down-close_open .45s ease forwards;」の「.45s」は0.45秒を表します。値を大きくするとゆっくり表示され、小さくすると速く表示されます。
・style.cssの「animation:modal-slide-down-close_close .45s ease forwards;」の「.45s」は0.45秒を表します。値を大きくするとゆっくり閉じ、小さくすると速く閉じます。
・script.jsの「setTimeout(…,450);」の「450」は450ミリ秒（0.45秒）を表します。閉じるアニメーションの「.45s」と同じ時間に設定してください。
・style.cssの「translateY(-120px)」と「translateY(120px)」の「120px」を大きくすると移動距離が長くなり、小さくすると短くなります。
・style.cssの「background:rgba(15,23,42,.55);」の「.55」を変更すると、背景オーバーレイの濃さが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでモーダル本体に「width:100%;」「max-width:420px;」を設定し、背景オーバーレイに「padding:20px;」を指定しているため、画面幅に応じてモーダルの横幅と画面端の余白が自動調整されます。また、画面幅640px以下ではメディアクエリによって表示エリアの余白を「24px 18px」に変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント