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

html/css/js
2025.09.22

モーダルの開き方 5種類

モーダルの開き方を5種類用意しました。「コードブロック（HTML/CSS/JS）」内をコピペしてそのまま使えます。
コードタブの中身は 単体ファイルでそのまま動く版（.cp-article スコープなし）です。
（Fade（ふわっと）／Slide（スライドアップ）／Zoom（ズームイン）／Flip（フリップ）／Rotate（ローテート））

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

① ふわっと（Fade）

<!-- Fade モーダル：HTML（単体動作） -->
<div class="cp-modal" id="cp-modal-fade" data-anim="fade">

  <!-- トリガー：クリックで open() -->
  <button class="btn" type="button" data-open>このアニメで開く</button>

  <!-- 背景の暗幕：非表示時は CSS でクリック不可 -->
  <div class="layer" aria-hidden="true">

    <!-- 本体ダイアログ：.anim を付けてフェード対象にする -->
    <div class="dialog anim" role="dialog" aria-modal="true" aria-labelledby="title-fade" tabindex="-1">

      <!-- タイトル（スクリーンリーダー関連付け） -->
      <h3 id="title-fade">Fade モーダル</h3>

      <!-- 本文：説明など任意 -->
      <p>ふわっとフェードインで表示します。背景クリック／ESC／「閉じる」で閉じられます。</p>

      <!-- 閉じるボタン -->
      <button class="btn" type="button" data-close>閉じる</button>

    </div> <!-- /.dialog -->

  </div> <!-- /.layer -->

</div> <!-- /.cp-modal -->

② スライドアップ（Slide）

<!-- Slide モーダル：HTML（単体動作） -->
<div class="cp-modal" id="cp-modal-slide" data-anim="slide">
  <!-- トリガー -->
  <button class="btn" type="button" data-open>このアニメで開く</button>

  <!-- 背景（クリックで閉じる判定に使用） -->
  <div class="layer" aria-hidden="true">

    <!-- 本体：.anim がアニメ対象、aria-labelledby で見出し関連付け -->
    <div class="dialog anim" role="dialog" aria-modal="true" aria-labelledby="title-slide" tabindex="-1">
      <h3 id="title-slide">Slide モーダル</h3>
      <p>下からスライドして表示します。背景クリック／ESC／「閉じる」で閉じられます。</p>
      <button class="btn" type="button" data-close>閉じる</button>
    </div>

  </div>
</div>

③ ズームイン（Zoom）

<!-- Zoom モーダル：HTML（単体動作） -->
<div class="cp-modal" id="cp-modal-zoom" data-anim="zoom">
  <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-zoom" tabindex="-1">
      <h3 id="title-zoom">Zoom モーダル</h3>
      <p>少し縮小から拡大して表示します。背景クリック／ESC／「閉じる」で閉じられます。</p>
      <button class="btn" type="button" data-close>閉じる</button>
    </div>
  </div>
</div>

④ フリップ（Flip）

<!-- Flip モーダル：HTML（単体動作） -->
<div class="cp-modal" id="cp-modal-flip" data-anim="flip">

  <!-- 開くトリガー -->
  <button class="btn" type="button" data-open>このアニメで開く</button>

  <div class="layer" aria-hidden="true">

    <!-- .anim が 3D 回転の対象。tabindex でフォーカス可 -->
    <div class="dialog anim" role="dialog" aria-modal="true" aria-labelledby="title-flip" tabindex="-1">
      <h3 id="title-flip">Flip モーダル</h3>
      <p>Y軸方向にフリップしながら表示します。背景クリック／ESC／「閉じる」で閉じられます。</p>
      <button class="btn" type="button" data-close>閉じる</button>
    </div>

  </div>
</div>

⑤ ローテート（Rotate）

<!-- Rotate モーダル：HTML（単体動作） -->
<div class="cp-modal" id="cp-modal-rotate" data-anim="rotate">
  <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-rotate" tabindex="-1">
      <h3 id="title-rotate">Rotate モーダル</h3>
      <p>軽い回転＋拡大で表示します。背景クリック／ESC／「閉じる」で閉じられます。</p>
      <button class="btn" type="button" data-close>閉じる</button>
    </div>
  </div>
</div>

コメント