右上から表示・左下へ閉じるモーダルウインドウの作り方
右上から表示・左下へ閉じるモーダルウインドウの作り方を紹介します。このサンプルでは、モーダルを開くと画面右上から斜めにスライドしながら中央へ表示され、閉じると左下へ向かって移動しながら非表示になります。通常のフェード表示とは異なり、移動方向がはっきり分かるため、画面遷移や通知、操作完了などを印象的に演出したい場面に適しています。
HTML・CSS・JavaScriptだけで実装しているため、そのままコピーして利用できます。お問い合わせ画面、管理画面、会員サイト、ダッシュボードなどで、操作内容を分かりやすく伝えるモーダルとして利用できます。JavaScriptもシンプルな構成なので、既存ページへ組み込みやすいのも特徴です。
アニメーション時間や移動距離はCSSから簡単に変更できます。表示速度をゆっくりにしたり、移動量を大きくしたりと、サイトデザインに合わせた調整も可能です。スマートフォン・タブレット・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-top-right-bottom-left_wrap">
<!-- タイトル -->
<div class="modal-top-right-bottom-left_title">
右上から表示・左下へ閉じるモーダル
</div>
<!-- 説明文 -->
<p class="modal-top-right-bottom-left_text">
モーダルは右上から表示され、閉じると左下へ移動します。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-top-right-bottom-left_open"
type="button"
data-modal-top-right-bottom-left-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div
class="modal-top-right-bottom-left_overlay"
data-modal-top-right-bottom-left-overlay>
<!-- モーダル本体 -->
<div
class="modal-top-right-bottom-left_modal"
data-modal-top-right-bottom-left-modal
role="dialog"
aria-modal="true"
aria-labelledby="modal-top-right-bottom-left-title">
<!-- モーダルタイトル -->
<div
class="modal-top-right-bottom-left_modal-title"
id="modal-top-right-bottom-left-title">
モーダルタイトル
</div>
<!-- モーダル本文 -->
<p class="modal-top-right-bottom-left_modal-text">
右上から表示され、左下へ移動しながら閉じるアニメーションです。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="modal-top-right-bottom-left_close"
type="button"
data-modal-top-right-bottom-left-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の「translate(220px,-220px)」を変更すると、右上から表示される移動距離を調整できます。
・style.cssの「translate(-220px,220px)」を変更すると、左下へ閉じる移動距離を調整できます。
・style.cssの「max-width:420px;」を変更すると、モーダル本体の最大横幅を調整できます。
数値調整
・style.cssの「animation:modal-top-right-bottom-left_in .55s ease forwards;」の「.55s」は0.55秒を表します。値を大きくするとゆっくり表示され、小さくすると速く表示されます。
・style.cssの「animation:modal-top-right-bottom-left_out .55s ease forwards;」の「.55s」は0.55秒を表します。値を大きくするとゆっくり閉じ、小さくすると速く閉じます。
・script.jsの「setTimeout(…,550);」の「550」は550ミリ秒（0.55秒）を表します。閉じるアニメーションの「.55s」と同じ時間に設定してください。
・style.cssの「translate(220px,-220px)」と「translate(-220px,220px)」の「220px」を大きくすると移動距離が長くなり、小さくすると短くなります。
・style.cssの「background:rgba(15,23,42,.55);」の「.55」を変更すると、背景オーバーレイの濃さが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでモーダル本体に「width:100%;」「max-width:420px;」を設定し、背景オーバーレイに「padding:20px;」を指定しているため、画面幅に応じてモーダルの横幅と画面端の余白が自動調整されます。また、画面幅640px以下ではメディアクエリによって表示エリアの余白を「24px 18px」に変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント