ページ読み込み時に自動表示するモーダルウインドウを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

ページ読み込み時に自動表示するモーダルウインドウを作る方法

HTML・CSS・JavaScriptを使って、ページ読み込み時に自動表示するモーダルウインドウを作る方法を紹介します。このサンプルでは、ページを開いたタイミングでモーダルウインドウを表示し、閉じるボタンや背景クリックで閉じる動作を実装しています。お知らせ表示やキャンペーン案内、初回表示メッセージなどに利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

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

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定します -->
  <meta charset="UTF-8">

  <!-- ページタイトルです -->
  <title>ページ読み込み時に自動表示するモーダルウインドウ</title>

  <!-- CSSファイルを読み込みます -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- コンテンツ全体を囲むエリアです -->
  <div class="auto-open-modal-window_wrap">

    <!-- タイトルです -->
    <div class="auto-open-modal-window_title">
      ページ読み込み時に自動表示するモーダル
    </div>

    <!-- 説明文です -->
    <p class="auto-open-modal-window_text">
      ページを開くとモーダルウインドウが自動表示されます。
    </p>

  </div>

  <!-- モーダル背景です -->
  <div class="auto-open-modal-window_overlay" data-modal-overlay>

    <!-- モーダル本体です -->
    <div class="auto-open-modal-window_modal" role="dialog" aria-modal="true">

      <!-- モーダルタイトルです -->
      <div class="auto-open-modal-window_modal-title">
        ようこそ！
      </div>

      <!-- モーダル本文です -->
      <p class="auto-open-modal-window_modal-text">
        このモーダルウインドウは、ページを読み込んだタイミングで自動表示されています。<br>
        「閉じる」ボタン、または背景部分をクリックすると閉じることができます。
      </p>

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

    </div>

  </div>

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

</body>
</html>

/* ページ全体の余白をなくします */
body{

  margin:0;

  /* フォントを指定します */
  font-family:sans-serif;

  /* 背景色を設定します */
  background:#ffffff;

}

/* コンテンツ全体を囲むエリアです */
.auto-open-modal-window_wrap{

  max-width:700px;
  margin:40px auto;
  padding:32px;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#f8fafc;
  text-align:center;

}

/* タイトルです */
.auto-open-modal-window_title{

  font-size:22px;
  font-weight:700;
  margin-bottom:12px;

}

/* 説明文です */
.auto-open-modal-window_text{

  color:#4b5563;

}

/* モーダル背景です */
.auto-open-modal-window_overlay{

  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,0.5);
  align-items:center;
  justify-content:center;
  padding:20px;

}

/* 表示時に付与するクラスです */
.auto-open-modal-window_overlay.is-active{

  display:flex;

}

/* モーダル本体です */
.auto-open-modal-window_modal{

  width:100%;
  max-width:460px;
  padding:28px;
  border-radius:18px;
  background:#ffffff;
  text-align:left;
  box-shadow:0 20px 40px rgba(0,0,0,0.2);

}

/* モーダルタイトルです */
.auto-open-modal-window_modal-title{

  font-size:24px;
  font-weight:700;
  margin-bottom:14px;

}

/* モーダル本文です */
.auto-open-modal-window_modal-text{

  margin-bottom:24px;
  color:#4b5563;
  line-height:1.8;

}

/* 閉じるボタンです */
.auto-open-modal-window_close{

  padding:10px 20px;
  border:none;
  border-radius:8px;
  background:#111827;
  color:#ffffff;
  font-weight:700;
  cursor:pointer;

}

// モーダルを閉じるボタンを取得します
const modalClose=document.querySelector('[data-modal-close]');

// モーダル背景を取得します
const modalOverlay=document.querySelector('[data-modal-overlay]');

// ページ読み込み後にモーダルを自動表示します
window.addEventListener('load',function(){

  modalOverlay.classList.add('is-active');

});

// 閉じるボタンをクリックしたらモーダルを閉じます
modalClose.addEventListener('click',function(){

  modalOverlay.classList.remove('is-active');

});

// 背景部分をクリックしたらモーダルを閉じます
modalOverlay.addEventListener('click',function(event){

  if(event.target===modalOverlay){

    modalOverlay.classList.remove('is-active');

  }

});

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて使用します。index.html、style.css、script.js を同じフォルダに配置してください。

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

index.html をブラウザで開くと、ページ読み込み時にモーダルウインドウが自動表示されます。「閉じる」ボタン、または背景部分をクリックするとモーダルを閉じることができます。

目的のサンプルコードを探す

コメント