スクロール位置で自動表示するモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

スクロール位置で自動表示するモーダルウインドウの作り方

スクロール位置で自動表示するモーダルウインドウの作り方を紹介します。ページを開いた直後ではなく、ユーザーが一定の位置までスクロールしたタイミングでモーダルを表示できるサンプルです。HTML・CSS・JavaScriptだけで実装できるため、外部ライブラリを使わずに、Webページ内の案内やお知らせ表示を作成できます。

サンプルコードでは、ページを下へスクロールし、指定したスクロール位置を超えるとモーダルウインドウが自動で表示されます。モーダル内の「閉じる」ボタンをクリックするとモーダルを閉じます。一度表示された後は、同じページ内で何度も繰り返し表示されない構成にしているため、ユーザーの閲覧を邪魔しにくい動作になります。

ECサイトの商品説明ページ、サービス紹介ページ、ブログ記事、会員サイトのお知らせ欄などで、ページを読み進めたユーザーへ補足情報を表示したい場合に活用できます。表示する位置は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-window-auto-open-on-scroll_page">

    <!-- メイン表示エリア -->
    <div class="modal-window-auto-open-on-scroll_wrap">

      <!-- タイトル -->
      <h1 class="modal-window-auto-open-on-scroll_title">
        スクロール位置で自動表示するモーダルウインドウ
      </h1>

      <!-- 説明文 -->
      <p class="modal-window-auto-open-on-scroll_text">
        ページを下へスクロールすると、指定したスクロール位置でモーダルウインドウが自動表示されます。
      </p>

    </div>

    <!-- スクロール確認用の本文エリア -->
    <div class="modal-window-auto-open-on-scroll_content">

      <!-- 本文ブロック -->
      <p class="modal-window-auto-open-on-scroll_content-text">
        このエリアはスクロール位置を確認するための本文エリアです。ページを下へスクロールすると、指定した位置でモーダルが表示されます。
      </p>

    </div>

  </div>

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

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

      <!-- モーダルタイトル -->
      <h2
        id="scroll-modal-title"
        class="modal-window-auto-open-on-scroll_modal-title">
        スクロール位置のお知らせ
      </h2>

      <!-- モーダル本文 -->
      <p class="modal-window-auto-open-on-scroll_modal-text">
        指定したスクロール位置を超えたため、モーダルウインドウが自動表示されました。閉じるボタンをクリックするとモーダルを閉じます。
      </p>

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

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* 外側の余白 */
  padding:40px 20px; /* 内側の余白 */
  background:#ffffff; /* 背景色 */
  font-family:sans-serif; /* フォント */
}

/* ページ全体 */
.modal-window-auto-open-on-scroll_page{
  min-height:1200px; /* ページの高さ：値を大きくするとスクロール量が増える */
}

/* メイン表示エリア */
.modal-window-auto-open-on-scroll_wrap{
  max-width:700px; /* 最大横幅：変更すると全体の幅が変わる */
  margin:40px auto; /* 上下余白・中央配置 */
  padding:32px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:18px; /* 角丸 */
  background:#f8fafc; /* 背景色 */
  text-align:center; /* 中央揃え */
  box-sizing:border-box; /* paddingを幅に含める */
}

/* タイトル */
.modal-window-auto-open-on-scroll_title{
  margin:0 0 12px; /* 下余白 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 太字 */
}

/* 説明文 */
.modal-window-auto-open-on-scroll_text{
  margin:0; /* 余白なし */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間：変更すると読みやすさが変わる */
}

/* スクロール確認用の本文エリア */
.modal-window-auto-open-on-scroll_content{
  max-width:700px; /* 最大横幅 */
  margin:0 auto; /* 中央配置 */
  padding:40px 0; /* 上下余白 */
}

/* 本文 */
.modal-window-auto-open-on-scroll_content-text{
  margin:0; /* 余白なし */
  color:#64748b; /* 文字色 */
  line-height:1.8; /* 行間 */
}

/* モーダル背景 */
.modal-window-auto-open-on-scroll_overlay{
  display:none; /* 初期状態は非表示 */
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 全画面表示 */
  z-index:9999; /* 最前面 */
  align-items:center; /* 縦中央 */
  justify-content:center; /* 横中央 */
  padding:20px; /* 画面端との余白 */
  background:rgba(15,23,42,.55); /* 背景の暗さ：数値を大きくすると濃くなる */
  box-sizing:border-box; /* paddingを幅に含める */
}

/* モーダル表示時 */
.modal-window-auto-open-on-scroll_overlay.is-active{
  display:flex; /* モーダルを表示 */
}

/* モーダル本体 */
.modal-window-auto-open-on-scroll_modal{
  width:100%; /* 横幅 */
  max-width:420px; /* 最大横幅：変更するとモーダルの大きさが変わる */
  padding:28px; /* 内側余白 */
  border-radius:18px; /* 角丸 */
  background:#ffffff; /* 背景色 */
  text-align:left; /* 左揃え */
  box-shadow:0 20px 40px rgba(0,0,0,.2); /* 影 */
  box-sizing:border-box; /* paddingを幅に含める */
}

/* モーダルタイトル */
.modal-window-auto-open-on-scroll_modal-title{
  margin:0 0 12px; /* 下余白 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 太字 */
}

/* モーダル本文 */
.modal-window-auto-open-on-scroll_modal-text{
  margin:0 0 24px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間：変更すると読みやすさが変わる */
}

/* 閉じるボタン */
.modal-window-auto-open-on-scroll_close{
  padding:10px 20px; /* 内側余白 */
  border:none; /* 枠線なし */
  border-radius:8px; /* 角丸 */
  background:#111827; /* 背景色 */
  color:#ffffff; /* 文字色 */
  font-size:15px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* マウスカーソル */
}

/* 640px以下の表示 */
@media (max-width:640px){

  /* メイン表示エリア */
  .modal-window-auto-open-on-scroll_wrap{
    padding:24px 18px; /* スマートフォン用の内側余白 */
  }

}

// モーダル全体を取得
const scrollModalOverlay=document.querySelector("[data-scroll-modal-overlay]");

// モーダルを閉じるボタンを取得
const scrollModalClose=document.querySelector("[data-scroll-modal-close]");

// モーダルを一度だけ表示するための状態
let scrollModalShown=false;

// モーダルを表示する関数
function openScrollModal(){

  // モーダルを表示
  scrollModalOverlay.classList.add("is-active");

}

// モーダルを非表示にする関数
function closeScrollModal(){

  // モーダルを非表示
  scrollModalOverlay.classList.remove("is-active");

}

// スクロールした時
window.addEventListener("scroll",function(){

  // すでに表示済みなら処理しない
  if(scrollModalShown){
    return;
  }

  // ページ先頭から400px以上スクロールした時
  if(window.scrollY>=400){

    // 再表示されないように表示済みにする
    scrollModalShown=true;

    // モーダルを表示
    openScrollModal();

  }

}); // 400は表示するスクロール位置。値を大きくすると下の位置で表示され、小さくすると上の位置で表示される

// 閉じるボタンをクリックした時
scrollModalClose.addEventListener("click",function(){

  // モーダルを閉じる
  closeScrollModal();

});

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。 HTMLでページ本文とモーダルウインドウの画面構成を作成し、CSSでレイアウトやデザインを設定、JavaScriptでスクロール位置を判定してモーダルを自動表示します。ファイルごとに役割を分けているため、表示内容・見た目・表示位置の調整を個別に行いやすい構成です。

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

各ファイルの役割
・index.html：ページ本文・モーダルタイトル・モーダル本文・閉じるボタンなど、画面に表示するHTMLを記述します。
・style.css：ページの高さ・背景色・文字サイズ・余白・角丸・影・モーダルの横幅・背景オーバーレイなど、見た目全体を設定します。
・script.js：ページ先頭からのスクロール量を判定し、指定した位置を超えた時にモーダルを表示します。閉じるボタンでモーダルを非表示にします。

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

カスタマイズできる内容
・index.htmlでは、ページのタイトル・説明文・モーダルタイトル・モーダル本文・閉じるボタンの文字を変更できます。
・style.cssでは、ページの高さ・背景色・文字サイズ・余白・角丸・影・モーダルの横幅・背景オーバーレイの暗さなどを変更できます。
・script.jsでは、モーダルを表示するスクロール位置を変更できます。現在はページ先頭から400px以上スクロールした時に表示されます。

数値調整
・script.jsの「400」は、ページ先頭から400px以上スクロールした時にモーダルを表示する設定です。値を大きくすると下の位置で表示され、小さくすると上の位置で表示されます。
・style.cssの「min-height:1200px;」を変更すると、ページ全体の高さを調整できます。値を大きくするとスクロール量が増えます。
・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でも画面幅に合わせてモーダルが表示されます。また、640px以下ではメイン表示エリアの余白を調整して、狭い画面でも見やすく表示されるようにしています。