コピペで完結！モーダルウインドウ#04【ウインドウ開き方5選vol.2】

html/css/js
2025.09.22

モーダルの開き方 5種類（Fade/Slide/Zoom/Flip/Rotate 以外）

本記事では「Drawer（右から）/ Drop（上から）/ Bounce（弾む）/ Blur（ぼかし解除）/ Skew（斜めから）」の5パターンを紹介。各パターンは「デモ」＋「HTML/CSS/JS の単体動作版コード（コピー可）」で構成されています。

コピー時のポイント CSS/JS はそのまま外部ファイル化も可能です。HTML の id（例：cp-modal-fade）と JS 内の参照が一致していることをご確認ください。
コードについて 本記事のコードは AI（ChatGPT）による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。 免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。

① ドロワー（Drawer：右から）

<!-- Drawer：HTML（単体動作版） -->
<div class="cp-modal" id="cp-modal-drawer" data-anim="drawer">
  <button class="btn" type="button" data-open>このアニメで開く</button>
  <div class="layer" aria-hidden="true"> <!-- 背景クリックで閉じる対象（JSで判定） -->
    <div class="dialog anim" role="dialog" aria-modal="true" aria-labelledby="title-drawer" tabindex="-1">
      <h3 id="title-drawer">Drawer モーダル</h3>
      <p>右側からスライドインします。ESC/背景クリック/ボタンで閉じられます。</p>
      <button class="btn" type="button" data-close>閉じる</button>
    </div>
  </div>
</div>

② ドロップ（Drop：上から）

<!-- Drop：HTML（単体動作版） -->
<div class="cp-modal" id="cp-modal-drop" data-anim="drop">
  <button class="btn" type="button" data-open>このアニメで開く</button>
  <div class="layer" aria-hidden="true">
    <div class="dialog anim" role="dialog" aria-modal="true" aria-labelledby="title-drop" tabindex="-1">
      <h3 id="title-drop">Drop モーダル</h3>
      <p>上から落ちて軽く反発するように表示。背景クリック／ESC／「閉じる」で閉じられます。</p>
      <button class="btn" type="button" data-close>閉じる</button>
    </div>
  </div>
</div>

③ バウンス（Bounce：弾む）

<!-- Bounce：HTML（単体動作版） -->
<div class="cp-modal" id="cp-modal-bounce" data-anim="bounce">
  <button class="btn" type="button" data-open>このアニメで開く</button>
  <div class="layer" aria-hidden="true">
    <div class="dialog anim" role="dialog" aria-modal="true" aria-labelledby="title-bounce" tabindex="-1">
      <h3 id="title-bounce">Bounce モーダル</h3>
      <p>拡大→少しオーバー→収束で弾む印象に。ESC/背景クリック/ボタンで閉じます。</p>
      <button class="btn" type="button" data-close>閉じる</button>
    </div>
  </div>
</div>

④ ブラー（Blur：ぼかし解除）

<!-- Blur：HTML（単体動作版） -->
<div class="cp-modal" id="cp-modal-blur" data-anim="blur">
  <button class="btn" type="button" data-open>このアニメで開く</button>
  <div class="layer" aria-hidden="true">
    <div class="dialog anim" role="dialog" aria-modal="true" aria-labelledby="title-blur" tabindex="-1">
      <h3 id="title-blur">Blur モーダル</h3>
      <p>フィルタのぼかし解除とフェードで滑らかに表示します。</p>
      <button class="btn" type="button" data-close>閉じる</button>
    </div>
  </div>
</div>

⑤ スキュー（Skew：斜めに）

<!-- Skew：HTML（単体動作版） -->
<div class="cp-modal" id="cp-modal-skew" data-anim="skew">
  <button class="btn" type="button" data-open>このアニメで開く</button>
  <div class="layer" aria-hidden="true">
    <div class="dialog anim" role="dialog" aria-modal="true" aria-labelledby="title-skew" tabindex="-1">
      <h3 id="title-skew">Skew モーダル</h3>
      <p>skewY で斜めに入ってからまっすぐに整います。ESC/背景クリック/ボタンで閉じます。</p>
      <button class="btn" type="button" data-close>閉じる</button>
    </div>
  </div>
</div>

コメント