下にスライドアウトして閉じるモーダルウインドウの作り方
下にスライドアウトして閉じるモーダルウインドウの作り方を紹介します。ボタンをクリックすると画面中央へモーダルウインドウが表示され、閉じるボタンをクリックするとモーダル本体が下方向へスライドしながら非表示になります。HTML・CSS・JavaScriptだけで実装できるため、シンプルな構成のまま動きのあるモーダルを導入したい場合に便利です。
このサンプルでは、モーダルを開く処理と閉じる処理に加え、閉じる際だけ下方向へ移動しながら透明になるアニメーションを実装しています。背景クリックやESCキーによる操作は含めず、下へスライドアウトして閉じる動作だけを確認できる構成です。基本モーダルに少し演出を加えたい場合のベースとして利用できます。
お問い合わせ画面や管理画面、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="bottom-slide-out-modal-window_wrap">
<!-- タイトル -->
<h1 class="bottom-slide-out-modal-window_title">
下にスライドアウトするモーダル
</h1>
<!-- 説明文 -->
<p class="bottom-slide-out-modal-window_text">
閉じるボタンをクリックすると、モーダルが下方向へスライドしながら閉じます。
</p>
<!-- モーダルを開くボタン -->
<button
class="bottom-slide-out-modal-window_open"
type="button"
data-bottom-slide-out-modal-window-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div
class="bottom-slide-out-modal-window_overlay"
data-bottom-slide-out-modal-window-overlay>
<!-- モーダル本体 -->
<div
class="bottom-slide-out-modal-window_modal"
role="dialog"
aria-modal="true"
aria-labelledby="bottom-slide-out-modal-window-title"
data-bottom-slide-out-modal-window-modal>
<!-- モーダルタイトル -->
<h2
id="bottom-slide-out-modal-window-title"
class="bottom-slide-out-modal-window_modal-title">
モーダルタイトル
</h2>
<!-- モーダル本文 -->
<p class="bottom-slide-out-modal-window_modal-text">
これは下にスライドアウトして閉じるモーダルウインドウです。閉じるボタンをクリックすると、下方向へ移動しながら非表示になります。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="bottom-slide-out-modal-window_close"
type="button"
data-bottom-slide-out-modal-window-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/index.htmlをブラウザで開きます。
④ 「モーダルを開く」をクリックするとモーダルが表示され、「閉じる」をクリックすると下へスライドしながら閉じる動作を確認できます。
カスタマイズできる内容
・index.htmlでは、タイトル、説明文、ボタンの文字などの表示内容を自由に変更できます。
・style.cssでは、モーダルの色、サイズ、余白、角丸、影、背景オーバーレイの色などを変更できます。
・style.cssの「transform:translateY(120px);」を変更すると、閉じる時の移動距離を調整できます。
・script.jsでは、開閉処理やアニメーション終了後の処理を変更できます。
数値調整
・style.cssの「transition:transform .35s ease, opacity .35s ease;」の「.35」は0.35秒を表します。値を大きくするとゆっくり閉じ、小さくすると速く閉じます。
・style.cssの「transform:translateY(120px);」の「120」は下へ移動する距離です。値を大きくするとより遠くまでスライドします。
・script.jsの「setTimeout(…,350);」の「350」は350ミリ秒（0.35秒）を表します。CSSのアニメーション時間と同じ値に設定してください。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」「padding:20px;」を設定しているため、画面サイズに応じてモーダルの幅や余白が自動調整されます。また、640px以下では余白を変更するメディアクエリを用意しているため、スマートフォン・タブレット・PCでもレイアウトが崩れにくく利用できます。
コメント