バウンドしながら開閉するモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

モーダルウインドウ

バウンドしながら開閉するモーダルウインドウの作り方

バウンドしながら開閉するモーダルウインドウの作り方を紹介します。モーダルを開くときは少し弾むような動きで表示され、閉じるときも軽く反動を付けながら縮小して閉じるため、動きのある印象的なUIを簡単に実装できます。HTML・CSS・JavaScriptのみで作成しているので、ライブラリを使わずにそのまま導入できます。

サンプルコードでは、「モーダルを開く」ボタンをクリックするとバウンドアニメーション付きでモーダルが表示され、「閉じる」ボタンをクリックするとバウンドしながら閉じます。表示と非表示の両方にアニメーションを設定しているため、開閉動作全体に統一感があり、自然な演出になります。

お知らせや確認画面、キャンペーン表示など、ユーザーの目を引きたい場面で利用できます。ボタンの文字やモーダル内のタイトル・説明文は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="modal-open-close-bounce_wrap">

    <!-- タイトル -->
    <h1 class="modal-open-close-bounce_title">
      バウンド開閉モーダル
    </h1>

    <!-- 説明文 -->
    <p class="modal-open-close-bounce_text">
      モーダルを開くと大きく弾みながら表示され、閉じると反動を付けながら閉じます。
    </p>

    <!-- モーダルを開くボタン -->
    <button
      class="modal-open-close-bounce_open"
      type="button"
      data-bounce-modal-open>
      モーダルを開く
    </button>

  </div>

  <!-- モーダル背景 -->
  <div
    class="modal-open-close-bounce_overlay"
    data-bounce-modal-overlay>

    <!-- モーダル本体 -->
    <div
      class="modal-open-close-bounce_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="bounce-modal-title"
      data-bounce-modal>

      <!-- モーダルタイトル -->
      <h2
        class="modal-open-close-bounce_modal-title"
        id="bounce-modal-title">
        モーダルタイトル
      </h2>

      <!-- モーダル本文 -->
      <p class="modal-open-close-bounce_modal-text">
        大きなバウンドアニメーションによる開閉動作を確認できます。
      </p>

      <!-- モーダルを閉じるボタン -->
      <button
        class="modal-open-close-bounce_close"
        type="button"
        data-bounce-modal-close>
        閉じる
      </button>

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでモーダルウインドウの構造を作成し、CSSでズームイン・ズームアウトの開閉アニメーションやデザインを設定、JavaScriptでモーダルの表示・非表示を制御しています。

モーダルを開くと拡大しながら表示され、閉じると縮小しながら自然に消えるアニメーションを実装しています。HTML・CSS・JavaScriptを役割ごとに分けているため、見た目や動作を個別に編集しやすく、アニメーション付きモーダルの基本構成を学びたい方にも利用しやすいサンプルです。 

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
・index.html：モーダル本体、タイトル、説明文、開くボタン、閉じるボタンなど画面に表示する内容を記述します。
・style.css：画面レイアウト、ボタン、モーダルのデザイン、背景オーバーレイ、ズームイン・ズームアウトの開閉アニメーションを設定します。
・script.js：開くボタン・閉じるボタンのクリックイベントを処理し、モーダルの表示・非表示と閉じるアニメーション終了後の非表示処理を行います。

設置方法・使い方
① sampleフォルダを作成します。
② index.html・style.css・script.jsの3ファイルを配置します。
③ sample/index.htmlをブラウザで開きます。
④ 「モーダルを開く」をクリックするとズームインで表示され、「閉じる」をクリックするとズームアウトしながら閉じる動作を確認できます。

カスタマイズできる内容
・index.htmlでは、ボタンの文字、モーダルタイトル、説明文を自由に変更できます。
・style.cssでは、モーダルの幅、背景色、文字色、余白、角丸、影、ボタンデザインなどを変更できます。
・style.cssでは、ズームイン・ズームアウトのアニメーション内容を変更して好みの動きへ調整できます。
・script.jsでは、モーダルを開く・閉じる処理やイベントを追加できます。

数値調整
・style.cssの「animation: ～ .4s」は開閉アニメーション時間です。値を大きくするとゆっくり、小さくすると素早く動作します。
・style.cssの「transform:scale(0.8);」などのscale値を変更すると、拡大・縮小の大きさを調整できます。
・script.jsの「setTimeout(…,400);」の400はミリ秒です。CSSのアニメーション時間と同じ値に設定すると自然に閉じます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width」「padding」などを設定しているため、画面サイズに合わせてモーダルの幅や余白が自動調整されます。スマートフォン・タブレット・PCでもレイアウトを崩さず利用できます。

こちらもおすすめ

モーダルウインドウ
モーダルウインドウのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント