コピペで完結！モーダルウインドウ#09【スクロール位置で自動表示】

/* =========================================
  モーダルウインドウ #09（スクロール到達で表示）CSS
  - スコープ：#modal09-demo 内に限定
  - 役割   ：「セクション2の中腹が画面中央に来たら」モーダルを表示
  - 備考   ：背景スクロールを止めるための body クラスも定義
========================================= */

/* ▼デモ全体のラッパー（衝突回避のため必ずスコープを付ける） */
#modal09-demo{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Yu Gothic UI",sans-serif; /* 可読性の高い汎用フォント */
  color:#0f172a;                        /* ベースの文字色 */
}

/* ▼説明文などの余白調整（任意） */
#modal09-demo .lead{
  color:#64748b;                        /* 補助的な説明色 */
  margin:0 0 12px;                      /* 下余白 */
  line-height:1.8;                      /* 行間 */
}

/* ▼スクロールを発生させるダミー領域（高さを大きめに） */
#modal09-demo .dummy{
  height:900px;                         /* スクロールを確実に起こす高さ */
  background:linear-gradient(#f8fafc,#e2e8f0); /* 薄いグラデーション */
  border-radius:8px;                    /* 角丸でブロックを認識しやすく */
  margin:20px 0;                        /* 上下余白 */
}

/* ▼トリガー表示ブロック（セクション2の見出し位置目印） */
#modal09-demo #trigger{
  padding:18px;                          /* 内側余白 */
  text-align:center;                      /* 文言を中央寄せ */
  background:#f8fafc;                    /* 背景色 */
  border:1px dashed #e5e7eb;             /* 点線で目立たせる */
  color:#0f172a;                          /* 文字色 */
  border-radius:8px;                      /* 角丸 */
}

/* ▼オーバーレイ（モーダルの背景） */
#modal09-demo .overlay{
  position:fixed;                        /* 画面全体に固定 */
  inset:0;                               /* 四辺を0：全画面化 */
  background:rgba(0,0,0,.55);            /* 半透明の黒 */
  display:none;                          /* 初期は非表示 */
  place-items:center;                    /* Gridの中央寄せ */
  z-index:9999;                          /* 最前面に表示 */
}

/* ▼オーバーレイが「有効」になったときに表示する */
#modal09-demo .overlay.active{
  display:grid;                          /* Grid表示に切り替え（中央寄せ） */
}

/* ▼ダイアログ本体（モーダルの中身） */
#modal09-demo .dialog{
  background:#fff;                       /* 背景を白に */
  padding:20px;                          /* 内側余白 */
  border-radius:12px;                     /* 角丸 */
  max-width:420px;                        /* 最大幅の制限 */
  width:90%;                              /* 画面幅に応じて伸縮 */
  box-shadow:0 20px 50px rgba(2,8,23,.25);/* 立体感のある影 */
  transform:translateY(10px);             /* 初期位置を少し下に */
  opacity:0;                              /* 初期は透明 */
  transition:.18s ease-out;               /* アニメーション（出現時の滑らかさ） */
  outline:0;                              /* フォーカスアウトラインはJS側で制御 */
}

/* ▼オーバーレイが有効のときにダイアログをアニメーション表示 */
#modal09-demo .overlay.active .dialog{
  transform:translateY(0);               /* 下から上に戻る */
  opacity:1;                             /* 不透明にする */
}

/* ▼モーダルのタイトル */
#modal09-demo .dialog h3{
  margin:0 0 8px;                        /* 下余白 */
  font-size:18px;                        /* 文字サイズ */
}

/* ▼モーダル内テキスト */
#modal09-demo .dialog p{
  margin:0 0 12px;                       /* 下余白 */
}

/* ▼補足情報（到達判定の差分などを表示） */
#modal09-demo .meta{
  font-size:12px;                        /* 小さめの文字 */
  color:#64748b;                         /* 補助色 */
  background:#f8fafc;                    /* 薄い背景 */
  border:1px solid #e5e7eb;              /* 薄い枠線 */
  border-radius:8px;                      /* 角丸 */
  padding:8px;                            /* 内側余白 */
  word-break:break-word;                  /* 長文対策 */
}

/* ▼閉じるボタン */
#modal09-demo .close-btn{
  appearance:none;                        /* ブラウザ既定をリセット */
  border:1px solid transparent;           /* 枠線（通常は透明） */
  border-radius:10px;                     /* 角丸 */
  background:#0b6bff;                     /* 強調色の青 */
  color:#fff;                             /* 文字色は白 */
  padding:8px 14px;                       /* 内側余白 */
  cursor:pointer;                         /* カーソルを指に */
  margin-top:14px;                        /* 上に余白 */
}

/* ▼背景スクロール停止用（JSで body に付与・削除する） */
body.modal09-lock{
  overflow:hidden;                        /* スクロールバーを隠す */
  touch-action:none;                      /* モバイルでのジェスチャー無効化（任意） */
}

<!-- =========================================
  モーダルウインドウ #09（スクロール到達で表示）HTML
  - スコープ：このブロック内は #modal09-demo に限定
  - 使い方 ：このままページ本文に貼り付けてOK
========================================= -->

<div id="modal09-demo"> <!-- ★デモ全体のラッパー（CSS/JSのスコープ基点） -->

  <!-- ▼導入文（任意） -->
  <p class="lead">
    下にスクロールして、<strong>セクション2の中腹</strong>が画面の中央に重なったらモーダルが表示されます。
  </p>

  <!-- ▼スクロールさせるためのダミー領域（上段） -->
  <div class="dummy" aria-hidden="true"></div>

  <!-- ▼トリガー要素（セクション2の見出し相当） -->
  <div id="trigger">
    ▼ セクション2：ここ（中腹）が画面中央に来たらモーダルを表示
  </div>

  <!-- ▼スクロールさせるためのダミー領域（下段） -->
  <div class="dummy" aria-hidden="true"></div>

  <!-- ▼モーダル本体（オーバーレイ＋ダイアログ） -->
  <div class="overlay" id="overlay"> <!-- 画面全体を覆う背景 -->
    <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc" tabindex="-1"> <!-- モーダルダイアログ -->
      <h3 id="dlg-title">スクロール到達！</h3>
      <p id="dlg-desc">
        セクション2の<strong>中腹</strong>が、画面の<strong>中央（50vh）</strong>に重なったためモーダルを表示しました。
      </p>
      <div class="meta" id="metaText"><!-- 到達時の詳細（差分pxなど）をJSで挿入 --></div>
      <button type="button" class="close-btn" id="closeBtn">閉じる</button>
    </div>
  </div>

</div> <!-- /#modal09-demo -->

// =========================================
// モーダルウインドウ #09（スクロール到達で表示）JS
// - 仕様：セクション2の「中腹」が画面中央（50vh）に重なったとき表示
// - 特徴：背景スクロールロック（body.modal09-lock を付与/削除）
// - 範囲：#modal09-demo 配下のみを操作（衝突回避）
// =========================================

(function(){
  'use strict'; // 厳格モードで安全性を高める

  /* -----------------------------
   * 要素参照（#modal09-demo 内に限定）
   * --------------------------- */
  const root    = document.getElementById('modal09-demo');         // デモのスコープ基点
  if(!root) return;                                                // 想定外：ルートが無い場合は何もしない

  const overlay = root.querySelector('#overlay');                   // オーバーレイ
  const dialog  = root.querySelector('.dialog');                    // ダイアログ本体
  const closeBtn= root.querySelector('#closeBtn');                  // 閉じるボタン
  const trigger = root.querySelector('#trigger');                   // トリガー対象（セクション2相当）
  const meta    = root.querySelector('#metaText');                  // 詳細表示領域

  /* -----------------------------
   * 設定値
   * --------------------------- */
  const THRESHOLD_PX = 40;  // 画面中央(50vh)と要素中腹の差が±このpx以内で到達判定
  let shown = false;        // 一度だけ表示するためのフラグ

  /* -----------------------------
   * 補助関数：状態表示（詳細テキスト挿入）
   * --------------------------- */
  function setMeta(text){
    if(meta) meta.textContent = text || '';
  }

  /* -----------------------------
   * モーダルの開閉
   * --------------------------- */
  function openModal(detailText){
    // 背景スクロール停止（body にクラスを付与）
    document.body.classList.add('modal09-lock');

    // 詳細テキストを表示（任意）
    setMeta(detailText);

    // オーバーレイを可視化
    overlay.classList.add('active');

    // フォーカスをダイアログへ（次フレームで確実に）
    requestAnimationFrame(()=> dialog.focus());
  }

  function closeModal(){
    // オーバーレイを非表示
    overlay.classList.remove('active');

    // 背景スクロールを再開
    document.body.classList.remove('modal09-lock');

    // フォーカス整理（必須ではないが、意図しないフォーカス残りを回避）
    closeBtn.blur();
  }

  /* -----------------------------
   * 到達判定（要素中腹 vs ビューポート中央）
   * --------------------------- */
  function checkMidOverlap(){
    if(shown) return;                                            // 既に表示済みなら何もしない

    const rect = trigger.getBoundingClientRect();                // トリガー要素のビューポート座標
    const vpCenter = window.innerHeight / 2;                     // 画面中央のY座標（50vh）
    const elemMid = (rect.top + rect.bottom) / 2;                // 要素の中腹のY座標
    const diff = Math.round(elemMid - vpCenter);                 // 差分（+下方向 / −上方向）

    // 差分が閾値以内なら「到達」とみなす
    if(Math.abs(diff) <= THRESHOLD_PX){
      openModal(`判定：要素の中腹(${Math.round(elemMid)}px)と画面中央(${Math.round(vpCenter)}px)の差 ${diff}px（±${THRESHOLD_PX}px以内）`);
      shown = true;                                              // 再表示を防ぐ
      // 以後のスクロール監視を停止（パフォーマンス配慮）
      window.removeEventListener('scroll', onScroll, {passive:true});
    }
  }

  /* -----------------------------
   * スクロール監視（必要最低限）
   * --------------------------- */
  function onScroll(){ checkMidOverlap(); }

  // 初期ロード時／スクロール時／リサイズ時に判定
  window.addEventListener('load',   checkMidOverlap);            // 初期位置でも判定
  window.addEventListener('scroll', onScroll, {passive:true});   // スクロールで判定
  window.addEventListener('resize', checkMidOverlap);            // 画面サイズ変更時も再判定

  /* -----------------------------
   * 閉じる操作（3系統）
   * --------------------------- */
  // 1) 「閉じる」ボタンで閉じる
  closeBtn.addEventListener('click', closeModal);

  // 2) オーバーレイ背景のクリックで閉じる（ダイアログ外のみ反応）
  overlay.addEventListener('click', (e)=>{
    if(e.target === overlay) closeModal();
  });

  // 3) Escキーで閉じる（モーダル表示時のみ）
  window.addEventListener('keydown', (e)=>{
    if(e.key === 'Escape' && overlay.classList.contains('active')){
      closeModal();
    }
  });

})();