画面上からスライドインするモーダルウインドウの作り方
画面上からスライドインするモーダルウインドウの作り方を紹介します。モーダルウインドウを表示すると、画面上部から滑らかにスライドしながら表示されるアニメーションを実装するサンプルです。フェード表示だけでは物足りない場合でも、動きのある自然な表示演出を簡単に追加できます。
サンプルコードでは、「モーダルを開く」ボタンをクリックすると、モーダルウインドウが画面上から中央へ向かってスライドしながら表示されます。閉じるボタンをクリックするとモーダルは非表示になり、再度ボタンを押すことで何度でも動作を確認できます。HTML・CSS・JavaScriptのみで実装しているため、既存サイトへも導入しやすい構成です。
お知らせやキャンペーン、ログイン画面、確認ダイアログなど、ユーザーの視線を自然に集めたい場面で活用できます。タイトルや本文はHTML、アニメーションやデザインはCSS、開閉処理はJavaScriptで管理しているため、表示速度や移動距離なども自由にカスタマイズできます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!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-in-top_wrap">
<!-- タイトル -->
<h1 class="modal-slide-in-top_title">
画面上からスライドインするモーダルウインドウ
</h1>
<!-- 説明文 -->
<p class="modal-slide-in-top_text">
モーダルウインドウが画面上から中央へスライドしながら表示されます。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-slide-in-top_open"
type="button"
data-modal-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div
class="modal-slide-in-top_overlay"
data-modal-overlay>
<!-- モーダル本体 -->
<div
class="modal-slide-in-top_modal"
data-modal-box
role="dialog"
aria-modal="true"
aria-labelledby="modal-title">
<!-- モーダルタイトル -->
<h2
id="modal-title"
class="modal-slide-in-top_modal-title">
モーダルタイトル
</h2>
<!-- モーダル本文 -->
<p class="modal-slide-in-top_modal-text">
画面上から滑らかにスライドインして表示されるモーダルウインドウです。
</p>
<!-- 閉じるボタン -->
<button
class="modal-slide-in-top_close"
type="button"
data-modal-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を配置します。
③ index.htmlをブラウザで開きます。
④ 「モーダルを開く」ボタンをクリックすると、モーダルウインドウが画面上からスライドしながら表示されます。
⑤ 「閉じる」ボタンをクリックするとモーダルウインドウが閉じ、何度でも動作を確認できます。
カスタマイズできる内容
・index.htmlでは、タイトルや本文、ボタンの文字などを自由に変更できます。
・style.cssでは、モーダルの色・サイズ・余白・角丸・影・背景色・表示位置を変更できます。
・script.jsでは、開閉方法や表示タイミングなどの動作を自由に変更できます。
数値調整
・style.cssの「transform: translateY(-120px);」は、画面上から移動してくる開始位置です。値を大きくすると、より上からスライドして表示されます。
・style.cssの「transition: transform .35s ease, opacity .35s ease;」は、スライドインアニメーションの時間です。.35を大きくするとゆっくり、小さくすると素早く表示されます。
・script.jsの「350」はモーダルを閉じるまでの待機時間です。CSSのtransition時間と同じ値に設定してください。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」「padding:20px;」を使用しているため、画面サイズに応じてモーダルの幅が自動調整されます。また、640px以下では余白を変更しているため、スマートフォン・タブレット・PCでも快適に利用できます。
コメント