左上から表示・右下へ閉じるモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

左上から表示・右下へ閉じるモーダルウインドウの作り方

左上から表示・右下へ閉じるモーダルウインドウの作り方を紹介します。モーダルを開くと左上から画面中央へ斜めにスライドしながら表示され、閉じると中央から右下へ移動しながら非表示になります。HTML・CSS・JavaScriptだけで実装しているため、外部ライブラリを使用せずに導入できます。

このサンプルでは、CSSのtranslateとopacityを組み合わせて、自然な斜め方向の開閉アニメーションを実現しています。JavaScriptでは開くボタンと閉じるボタンのクリックを処理し、閉じるアニメーションが終了した後にモーダルを非表示へ切り替えます。横方向や縦方向だけのスライドとは異なる動きを手軽に追加できます。

お問い合わせ画面、管理画面、会員サイト、ECサイトの商品紹介や確認画面など、視線を自然に誘導したい場面で利用できます。タイトルや本文、ボタンの文字はHTMLから変更でき、モーダルのサイズ、背景色、影、角丸、移動距離、アニメーション時間は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-left-open-bottom-right-close_wrap">

    <!-- タイトル -->
    <div class="modal-top-left-open-bottom-right-close_title">
      左上から表示・右下へ閉じるモーダル
    </div>

    <!-- 説明文 -->
    <p class="modal-top-left-open-bottom-right-close_text">
      左上から斜めに現れ、右下へ斜めに移動しながら閉じます。
    </p>

    <!-- モーダルを開くボタン -->
    <button
      class="modal-top-left-open-bottom-right-close_open"
      type="button"
      data-modal-top-left-open-bottom-right-close-open>
      モーダルを開く
    </button>

  </div>

  <!-- モーダル背景 -->
  <div
    class="modal-top-left-open-bottom-right-close_overlay"
    data-modal-top-left-open-bottom-right-close-overlay>

    <!-- モーダル本体 -->
    <div
      class="modal-top-left-open-bottom-right-close_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-top-left-open-bottom-right-close-title"
      data-modal-top-left-open-bottom-right-close-modal>

      <!-- モーダルタイトル -->
      <div
        class="modal-top-left-open-bottom-right-close_modal-title"
        id="modal-top-left-open-bottom-right-close-title">
        モーダルタイトル
      </div>

      <!-- モーダル本文 -->
      <p class="modal-top-left-open-bottom-right-close_modal-text">
        左上から表示され、右下へ移動しながら閉じるアニメーションを確認できます。
      </p>

      <!-- モーダルを閉じるボタン -->
      <button
        class="modal-top-left-open-bottom-right-close_close"
        type="button"
        data-modal-top-left-open-bottom-right-close-close>
        閉じる
      </button>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* 外側の余白 */
  padding:40px 20px; /* 内側の余白 */
  background:#ffffff; /* 背景色 */
  font-family:sans-serif; /* フォント */
}

/* モーダル表示エリア */
.modal-top-left-open-bottom-right-close_wrap{
  max-width:700px; /* 最大横幅：変更すると表示エリアの幅が変わる */
  margin:40px auto; /* 上下余白・中央配置 */
  padding:32px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:18px; /* 角丸 */
  background:#f8fafc; /* 背景色 */
  text-align:center; /* 中央揃え */
  box-sizing:border-box; /* paddingを幅に含める */
}

/* タイトル */
.modal-top-left-open-bottom-right-close_title{
  margin:0 0 12px; /* 下余白 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 太字 */
}

/* 説明文 */
.modal-top-left-open-bottom-right-close_text{
  margin:0 0 24px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間：値を大きくすると行間が広がる */
}

/* 開くボタン・閉じるボタン */
.modal-top-left-open-bottom-right-close_open,
.modal-top-left-open-bottom-right-close_close{
  padding:10px 22px; /* 内側余白 */
  border:none; /* 枠線なし */
  border-radius:8px; /* 角丸 */
  color:#ffffff; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* マウスカーソル */
}

/* モーダルを開くボタン */
.modal-top-left-open-bottom-right-close_open{
  background:#2563eb; /* 背景色 */
}

/* モーダルを閉じるボタン */
.modal-top-left-open-bottom-right-close_close{
  background:#111827; /* 背景色 */
}

/* モーダル背景 */
.modal-top-left-open-bottom-right-close_overlay{
  display:none; /* 初期状態は非表示 */
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 画面全体に広げる */
  z-index:9999; /* 最前面に表示 */
  align-items:center; /* 縦中央 */
  justify-content:center; /* 横中央 */
  padding:20px; /* 画面端との余白 */
  background:rgba(15,23,42,.55); /* 背景の暗さ：最後の数値を大きくすると濃くなる */
  box-sizing:border-box; /* paddingを幅に含める */
}

/* モーダル表示時 */
.modal-top-left-open-bottom-right-close_overlay.is-active{
  display:flex; /* モーダル背景を表示 */
}

/* モーダル本体 */
.modal-top-left-open-bottom-right-close_modal{
  width:100%; /* 横幅 */
  max-width:420px; /* 最大横幅：変更するとモーダルの幅が変わる */
  padding:28px; /* 内側余白 */
  border-radius:18px; /* 角丸 */
  background:#ffffff; /* 背景色 */
  text-align:left; /* 左揃え */
  box-shadow:0 20px 40px rgba(0,0,0,.2); /* 影 */
  box-sizing:border-box; /* paddingを幅に含める */
  animation:modal-top-left-open-bottom-right-close_in .5s ease forwards; /* .5秒で左上から表示：値を大きくすると遅くなる */
}

/* モーダルを閉じる時 */
.modal-top-left-open-bottom-right-close_modal.is-closing{
  animation:modal-top-left-open-bottom-right-close_out .5s ease forwards; /* .5秒で右下へ閉じる：JavaScriptの500ミリ秒と合わせる */
}

/* モーダルタイトル */
.modal-top-left-open-bottom-right-close_modal-title{
  margin:0 0 12px; /* 下余白 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 太字 */
}

/* モーダル本文 */
.modal-top-left-open-bottom-right-close_modal-text{
  margin:0 0 24px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間：値を大きくすると行間が広がる */
}

/* 左上から表示するアニメーション */
@keyframes modal-top-left-open-bottom-right-close_in{
  from{
    opacity:0; /* 透明な状態から開始 */
    transform:translate(-140px,-140px); /* 左上へ140pxずれた位置から開始 */
  }

  to{
    opacity:1; /* 完全に表示 */
    transform:translate(0,0); /* 通常位置へ移動 */
  }
}

/* 右下へ閉じるアニメーション */
@keyframes modal-top-left-open-bottom-right-close_out{
  from{
    opacity:1; /* 表示状態から開始 */
    transform:translate(0,0); /* 通常位置から開始 */
  }

  to{
    opacity:0; /* 完全に透明にする */
    transform:translate(140px,140px); /* 右下へ140px移動 */
  }
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* モーダル表示エリア */
  .modal-top-left-open-bottom-right-close_wrap{
    padding:24px 18px; /* 狭い画面用の内側余白 */
  }

}

// モーダルを開くボタンを取得
const topLeftOpenBottomRightCloseOpen=document.querySelector(
  "[data-modal-top-left-open-bottom-right-close-open]"
);

// モーダルを閉じるボタンを取得
const topLeftOpenBottomRightCloseClose=document.querySelector(
  "[data-modal-top-left-open-bottom-right-close-close]"
);

// モーダル背景を取得
const topLeftOpenBottomRightCloseOverlay=document.querySelector(
  "[data-modal-top-left-open-bottom-right-close-overlay]"
);

// モーダル本体を取得
const topLeftOpenBottomRightCloseModal=document.querySelector(
  "[data-modal-top-left-open-bottom-right-close-modal]"
);

// 開くボタンをクリックした時
topLeftOpenBottomRightCloseOpen.addEventListener("click",function(){

  // 閉じるアニメーション用クラスを外す
  topLeftOpenBottomRightCloseModal.classList.remove("is-closing");

  // モーダルを表示
  topLeftOpenBottomRightCloseOverlay.classList.add("is-active");

});

// 閉じるボタンをクリックした時
topLeftOpenBottomRightCloseClose.addEventListener("click",function(){

  // 右下へ閉じるアニメーション用クラスを付ける
  topLeftOpenBottomRightCloseModal.classList.add("is-closing");

  // 500ミリ秒後に非表示：CSSの .5秒と合わせる
  setTimeout(function(){

    // モーダル背景を非表示
    topLeftOpenBottomRightCloseOverlay.classList.remove("is-active");

    // 次回表示用にクラスを外す
    topLeftOpenBottomRightCloseModal.classList.remove("is-closing");

  },500);

});

ファイル構成と設置方法

このサンプルは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(-140px,-140px)」を変更すると、左上から表示される移動距離を調整できます。
・style.cssの「translate(140px,140px)」を変更すると、右下へ閉じる移動距離を調整できます。
・style.cssの「max-width:420px;」を変更すると、モーダル本体の最大横幅を調整できます。

数値調整
・style.cssの「animation:modal-top-left-open-bottom-right-close_in .5s ease forwards;」の「.5s」は0.5秒を表します。値を大きくするとゆっくり表示され、小さくすると速く表示されます。
・style.cssの「animation:modal-top-left-open-bottom-right-close_out .5s ease forwards;」の「.5s」は0.5秒を表します。値を大きくするとゆっくり閉じ、小さくすると速く閉じます。
・script.jsの「setTimeout(…,500);」の「500」は500ミリ秒（0.5秒）を表します。閉じるアニメーションの「.5s」と同じ時間に設定してください。
・style.cssの「translate(-140px,-140px)」と「translate(140px,140px)」の「140px」を大きくすると移動距離が長くなり、小さくすると短くなります。
・style.cssの「background:rgba(15,23,42,.55);」の「.55」を変更すると、背景オーバーレイの濃さが変わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでモーダル本体に「width:100%;」「max-width:420px;」を設定し、背景オーバーレイに「padding:20px;」を指定しているため、画面幅に応じてモーダルの横幅と画面端の余白が自動調整されます。また、画面幅640px以下ではメディアクエリによって表示エリアの余白を「24px 18px」に変更しているため、スマートフォン・タブレット・PCで利用できます。