指定時間後に自動表示するモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

モーダルウインドウ

指定時間後に自動表示するモーダルウインドウの作り方

指定時間後に自動表示するモーダルウインドウの作り方を紹介します。ページを開いてすぐではなく、指定した時間が経過したタイミングでモーダルウインドウを表示したい場合に利用できるサンプルです。HTML・CSS・JavaScriptだけで実装しているため、外部ライブラリを使わずシンプルな構成で導入できます。お知らせやキャンペーン情報、利用案内などをユーザーへ自然なタイミングで表示したいWebサイトに適しています。

サンプルコードでは、ページの読み込み完了後にJavaScriptでタイマーを開始し、指定した時間が経過するとモーダルウインドウが自動で表示されます。モーダル内の「閉じる」ボタンをクリックするとモーダルは閉じられます。表示までの待機時間はJavaScriptの数値を変更するだけで簡単に調整できるため、3秒・5秒・10秒など、サイトの目的に合わせて自由にカスタマイズできます。

ECサイトでセール情報を案内したり、お問い合わせ画面で補足情報を表示したり、会員サイトや管理画面でメンテナンスのお知らせを表示したりと、さまざまな場面で活用できます。モーダルのタイトルや本文はHTMLから変更でき、色やサイズ、余白などのデザインはCSSで調整できます。また、待機時間も自由に変更できるため、自分のWebサイトに合わせた自動表示モーダルウインドウを手軽に作成したい方にもおすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

指定時間後に自動表示するモーダルウインドウ

このデモでは、ページ表示から3秒後にモーダルウインドウが自動で表示されます。

ページ表示から3秒後にモーダルが自動表示されます。閉じた後は「もう一度確認する」をクリックすると再表示できます。

コードをコピーして使おう！

<!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-window-auto-open-delay_wrap">

    <!-- タイトル -->
    <h1 class="modal-window-auto-open-delay_title">
      指定時間後に自動表示するモーダルウインドウ
    </h1>

    <!-- 説明文 -->
    <p class="modal-window-auto-open-delay_text">
      ページ表示から3秒後にモーダルウインドウが自動で表示されます。
    </p>

  </div>

  <!-- モーダル背景 -->
  <div
    class="modal-window-auto-open-delay_overlay"
    data-delay-modal-overlay>

    <!-- モーダル本体 -->
    <div
      class="modal-window-auto-open-delay_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="delay-modal-title">

      <!-- モーダルタイトル -->
      <h2
        id="delay-modal-title"
        class="modal-window-auto-open-delay_modal-title">
        お知らせ
      </h2>

      <!-- モーダル本文 -->
      <p class="modal-window-auto-open-delay_modal-text">
        ページ表示から3秒後に自動表示されるモーダルウインドウです。閉じるボタンをクリックするとモーダルを閉じます。
      </p>

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

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。 HTMLでモーダルウインドウの画面構成を作成し、CSSでレイアウトやデザインを設定、JavaScriptでページ表示から3秒後にモーダルを自動表示する処理を実装しています。 ファイルごとに役割を分けているため、表示内容・見た目・動作を個別に編集しやすい構成です。 

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

各ファイルの役割
・index.html：モーダルのタイトル・本文・閉じるボタンなど、画面に表示するHTMLを記述します。
・style.css：画面レイアウト・背景色・文字サイズ・余白・角丸・モーダルのサイズ・背景オーバーレイなど、見た目全体を設定します。
・script.js：ページ表示から指定時間後にモーダルを表示し、閉じるボタンで非表示にする処理を行います。

設置方法・使い方
① sampleフォルダを作成します。
② index.html・style.css・script.jsの3ファイルを配置します。
③ index.htmlをブラウザで開きます。
④ ページ表示から3秒後にモーダルが自動表示されます。
⑤ 「閉じる」ボタンをクリックするとモーダルを閉じます。

カスタマイズできる内容
・index.htmlでは、モーダルタイトル・本文・閉じるボタンの文字などを変更できます。
・style.cssでは、背景色・文字サイズ・余白・角丸・影・モーダルの横幅・背景オーバーレイの暗さなどを変更できます。
・script.jsでは、モーダルが自動表示されるまでの待機時間を変更できます。

数値調整
・script.jsの「3000」は3秒を表します。値を「5000」に変更すると5秒後、「10000」に変更すると10秒後にモーダルが表示されます。
・style.cssの「max-width:420px;」を変更するとモーダルの横幅を調整できます。
・style.cssの「background:rgba(15,23,42,.55);」の「.55」を変更すると背景の暗さを調整できます。値を大きくすると暗く、小さくすると明るく表示されます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」「padding:20px;」「box-sizing:border-box;」を設定しているため、スマートフォン・タブレット・PCでも画面幅に合わせてモーダルが表示されます。

コメント