コピペで完結！モーダルウインドウ#08【ページ表示3秒後に出るモーダル】

ページ表示3秒後に出るモーダルウインドウ

本記事では、ページ表示から3秒後に自動で開くモーダルを、コピペだけで導入できるコードとしてご提供します。さらに、ノーマルボタン（押して3秒後に開く）とカウントダウンボタン（3→2→1表示後に開く）も同梱。お知らせ・注意喚起・クーポン告知など、ユーザーの視線が落ち着いたタイミングで確実に見せたい情報に最適です。

コードについて 本記事のコードは AI（ChatGPT）による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。

免責本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。

デモ

※ ページを開いてから3秒後に自動でモーダルが表示されます。
さらに、ノーマルボタンやカウントダウンボタンでもクリック後に3秒待ってモーダルが表示されます。
これらのボタン操作は、ユーザーが「遅延表示の仕組み」を実際に体感できるよう用意したものです（動作不良ではありません）。

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

/* =============================
   モーダルウインドウ #08 CSS
   - スコープ：#modal08-demo
   - 内容：自動表示＋ノーマル＋カウントダウン
   ============================= */
#modal08-demo .btn{appearance:none;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:.15s ease;}
#modal08-demo .btn-primary{background:#0b6bff;color:#fff;}
#modal08-demo .btn-ghost{background:#f8fafc;color:#0f172a;border:1px solid #e5e7eb;}
#modal08-demo .btn:active{transform:translateY(1px);}
#modal08-demo .status{font-size:14px;color:#64748b;margin-top:10px;}
#modal08-demo .overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;place-items:center;z-index:9999;}
#modal08-demo .overlay.active{display:grid;}
#modal08-demo .dialog{background:#fff;padding:20px;border-radius:12px;max-width:400px;width:90%;box-shadow:0 20px 50px rgba(0,0,0,.25);transform:translateY(10px);opacity:0;transition:.2s;}
#modal08-demo .overlay.active .dialog{transform:translateY(0);opacity:1;}
#modal08-demo .close-btn{margin-top:14px;background:#0b6bff;color:#fff;border:none;border-radius:8px;padding:8px 14px;cursor:pointer;}

<!-- =============================
     モーダルウインドウ #08 HTML
     ============================= -->
<div id="modal08-demo">
  <!-- 操作ボタン -->
  <button type="button" class="btn btn-primary" id="btn-normal">ノーマル：3秒後に表示</button>
  <button type="button" class="btn btn-ghost" id="btn-count">カウントダウン：3秒</button>
  <div class="status" id="status" aria-live="polite"></div>
  <!-- モーダル -->
  <div class="overlay" id="overlay">
    <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
      <h3 id="dlg-title">お知らせ</h3>
      <p id="dlg-desc">3秒後に表示されるモーダルです。</p>
      <button type="button" class="close-btn" id="closeBtn">閉じる</button>
    </div>
  </div>
</div>

// =============================
// モーダルウインドウ #08 JS
// - 仕様: ページ表示3秒後に自動表示
//         ＋ノーマルボタン(3秒後)
//         ＋カウントダウン(3→2→1)
// =============================
const demo=document.getElementById("modal08-demo");
const overlay=demo.querySelector("#overlay");
const dialog=demo.querySelector(".dialog");
const btnNormal=demo.querySelector("#btn-normal");
const btnCount=demo.querySelector("#btn-count");
const closeBtn=demo.querySelector("#closeBtn");
const statusEl=demo.querySelector("#status");
const DELAY_MS=3000;
let timerId=null,countId=null,counting=false;
function setStatus(t){statusEl.textContent=t||"";}
function openModal(){overlay.classList.add("active");setTimeout(()=>dialog.focus(),0);setStatus("モーダルを表示しました。");}
function closeModal(){overlay.classList.remove("active");}
// ★ ページ表示後3秒で自動表示
window.addEventListener("DOMContentLoaded",()=>{timerId=setTimeout(()=>{openModal();setStatus("ページ表示3秒後に自動表示されました。");},DELAY_MS);});
// ノーマルボタン
btnNormal.addEventListener("click",()=>{clearTimeout(timerId);setStatus("ノーマル：3秒後に表示します。");btnNormal.disabled=true;timerId=setTimeout(()=>{btnNormal.disabled=false;openModal();},DELAY_MS);});
// カウントダウンボタン
btnCount.addEventListener("click",()=>{if(counting)return;counting=true;let remain=3;btnCount.disabled=true;btnCount.textContent=`カウントダウン：${remain}`;setStatus("カウントダウン中…");countId=setInterval(()=>{remain--;if(remain>0){btnCount.textContent=`カウントダウン：${remain}`;}else{clearInterval(countId);btnCount.textContent="カウントダウン：3秒";btnCount.disabled=false;counting=false;openModal();}},1000);});
// 閉じる処理
closeBtn.addEventListener("click",closeModal);
overlay.addEventListener("click",e=>{if(e.target===overlay)closeModal();});
window.addEventListener("keydown",e=>{if(e.key==="Escape"&&overlay.classList.contains("active"))closeModal();});