コピペで完結!モーダルウインドウ#02【ページ読み込みで自動表示】

html/css/js

ページアクセスと同時にモーダルを自動表示

このサンプルはページを開いた瞬間にモーダルが自動で開く実装です。
背景クリック/ESC/ボタンで閉じられ、閉じた後は「もう一度開く」ボタンで再表示できます。

コードについて 本記事のコードは AI(ChatGPT)による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。 免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。

デモ

このページを表示すると自動でモーダルが開きます。閉じた後は「もう一度開く」で再表示できます。

タブ切替のコードブロック(コピー可)

<!-- ===============================================
     自動表示モーダル:HTML 構造
     - .cp-modal …… モーダル一式のラッパー(スコープ)
     - .btn …… 開閉トリガー(今回は「もう一度開く」)
     - .layer …… 背景の暗幕(クリックで閉じる対象)
     - .dialog …… 本体(タイトル・本文・閉じるボタンを内包)
     - aria-* …… アクセシビリティ配慮(役割/関連付け)
     - tabindex="-1" …… JSでフォーカスを当てられるように
     =============================================== -->

<div class="cp-modal" id="cp-modal-2">

  <!-- 再表示用のボタン:初回はJSで自動オープン -->
  <button class="btn" data-open-modal>もう一度開く</button>

  <!-- 暗幕レイヤー:見た目/クリック判定の両方で使用 -->
  <div class="layer" aria-hidden="true">

    <!-- ダイアログ本体:タイトル・本文・閉じるボタン -->
    <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="cp-modal2-title" tabindex="-1">

      <!-- タイトル:スクリーンリーダーへ結び付け -->
      <h3 id="cp-modal2-title">初回アクセスで開くモーダル</h3>

      <!-- 内容:任意の説明やバナー等に置き換え可能 -->
      <p>このモーダルはページ読み込み直後に自動で開きます。</p>

      <!-- 「閉じる」ボタン:明示的に閉じたい場合 -->
      <button class="btn" data-close-modal>閉じる</button>

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

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

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

ポイント

  • 自動表示:DOMContentLoaded 後に open() を呼び出し、初回アクセスで即オープン。
  • 3つの閉じ方:閉じるボタン/背景クリック/ESC キー。
  • 再表示:閉じた後は「もう一度開く」ボタンで再表示可能。
  • アクセシビリティ:開いたらダイアログへフォーカス、閉じたらトリガーへ返却。

コメント