Webサイトやページでポップアップウィンドウを実装する方法

公開：2024年9月4日更新：2025年11月11日

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

Webサイトにポップアップを実装することによって、ユーザーに重要な情報を効果的に伝えられます。しかし、ポップアップの種類や実装方法が分からず、どのように表示させれば良いか悩んでいる方も多いでしょう。

適切なポップアップを選択し、正しく実装することによって、コンバージョン率の向上やユーザーエンゲージメントの改善が期待できます。一方、不適切な実装はユーザー体験を損ない、サイトからの離脱を招くリスクもあります。

この記事では、Webサイトでポップアップを表示する具体的な方法について、JavaScriptやHTMLを使った実装例とともに解説します。さらに、「ポップアップの種類ごとの特徴」や「実際にコピペで使えるサンプルコード」も紹介しているので、ぜひ参考にしてください。

Webサイトでポップアップを表示する方法
JavaScriptのalert関数で表示する
JavaScriptのconfirm関数で表示する
カスタムHTMLとCSSで表示する
Webサイトで使用されるポップアップの種類
ライトボックス
スライドイン
フルスクリーン
フローティングバー
コピペでポップアップを実装するサンプルコード
index.html
style.css
script.js

Webサイトでポップアップを表示する方法

Webサイトでポップアップを表示するには、「JavaScriptを使用した方法」と「HTMLとCSSを組み合わせた方法」があります。ここでは、実装が簡単な順に3つの表示方法を紹介します。

JavaScriptのalert関数で表示する
JavaScriptのconfirm関数で表示する
カスタムHTMLとCSSで表示する

それぞれの方法には、実装の難易度やカスタマイズ性に違いがあり、目的に応じて使い分けられます。alert関数やconfirm関数はコードが短くすぐに実装できますが、デザインのカスタマイズには制限があります。本格的なポップアップを作成する場合は、HTMLとCSSを組み合わせた方法が適しています。

それでは各項目について、詳しく解説していきます。

JavaScriptのalert関数で表示する

alert関数とは、ブラウザに標準で組み込まれているJavaScriptの関数で、シンプルなメッセージボックスを表示できます。ユーザーがOKボタンをクリックするまで、他の操作を受け付けないモーダル形式のポップアップです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Alert関数のサンプル</title>
</head>
<body>
  <button onclick="alert('これはポップアップメッセージです')">ポップアップを表示</button>
</body>
</html>

上記のコードでは、ボタンをクリックするとalert関数が実行され、指定したメッセージがポップアップで表示されます。alert関数は引数として文字列を受け取り、その内容をポップアップウィンドウに表示する仕組みです。

この方法は実装が非常に簡単で、数行のコードで動作するため、簡易的な通知や警告メッセージを表示する際に適しています。ただし、デザインのカスタマイズができず、ブラウザのデフォルトスタイルで表示されるため、Webサイトのデザインに合わせた見た目にはできません。

JavaScriptのconfirm関数で表示する

confirm関数とは、ユーザーに確認を求めるダイアログを表示するJavaScriptの関数です。OKボタンとキャンセルボタンが表示され、ユーザーの選択に応じて処理を分岐できます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Confirm関数のサンプル</title>
</head>
<body>
  <button onclick="confirmAction()">確認ポップアップを表示</button>

  <script>
    function confirmAction() {
      const result = confirm('この操作を実行しますか?');
      if (result) {
        alert('OKが選択されました');
      } else {
        alert('キャンセルが選択されました');
      }
    }
  </script>
</body>
</html>

上記のコードでは、confirm関数を使用して、ユーザーに確認を求めるポップアップを表示しています。confirm関数は、OKボタンがクリックされた場合にtrueを、キャンセルボタンがクリックされた場合にfalseを返すため、この戻り値を使って処理を分岐できます。

この方法は削除操作やフォームの送信前など、ユーザーに確認を促したい場面で有効です。実装は簡単ですが、alert関数と同様にブラウザ標準の機能を使用するため、デザインのカスタマイズはできません。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

カスタムHTMLとCSSで表示する

HTMLとCSSを組み合わせてポップアップを実装する方法では、デザインや動作を自由にカスタマイズできます。JavaScriptで表示・非表示を制御することによって、Webサイトのデザインに合わせた独自のポップアップを作成できるため、より柔軟な実装が可能です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>カスタムポップアップのサンプル</title>
  <style>
    .popup-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }

    .popup-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      max-width: 400px;
    }

    .popup-close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      font-size: 24px;
      color: #666;
    }
  </style>
</head>
<body>
  <button onclick="openPopup()">ポップアップを開く</button>

  <div class="popup-overlay" id="popup">
    <div class="popup-content">
      <span class="popup-close" onclick="closePopup()">×</span>
      <h2>ポップアップタイトル</h2>
      <p>ここにポップアップの内容を記載します。</p>
    </div>
  </div>

  <script>
    function openPopup() {
      document.getElementById('popup').style.display = 'block';
    }

    function closePopup() {
      document.getElementById('popup').style.display = 'none';
    }
  </script>
</body>
</html>

上記のコードでは、HTMLでポップアップの構造を定義し、CSSでスタイルを適用しています。popup-overlayクラスは画面全体を覆う半透明の背景を作成し、popup-contentクラスでポップアップの本体を中央に配置する仕組みです。

JavaScriptの「openPopup関数」と「closePopup関数」を使用して、ポップアップの表示と非表示を切り替えています。この実装方法では、背景の透明度や角丸の大きさ、ボタンの位置などを自由に調整できるため、Webサイトのデザインに合わせたポップアップを作成できます。

Webサイトで使用されるポップアップの種類

Webサイトで使用されるポップアップには、表示方法やデザインによっていくつかの種類があります。ここでは、代表的な4つのポップアップの種類を紹介します。

ライトボックス
スライドイン
フルスクリーン
フローティングバー

ユーザー体験への影響度や視認性に違いがあり、目的に応じて使い分けられます。重要な通知を確実に届けたい場合はライトボックスやフルスクリーンが適していますが、ユーザー体験を損なわずに情報を伝えたい場合は、スライドインやフローティングバーが有効です。

それでは各項目について、詳しく解説していきます。

ライトボックス

ライトボックスとは、画面中央にポップアップを表示し、背景を半透明のオーバーレイで覆う形式のポップアップです。ユーザーの注意を強く引くため、重要な情報を確実に伝えたい場合に適しています。

主な特徴は、以下の通りです。

画面中央に表示されるため視認性が高い
背景がクリックできなくなるモーダル形式
メールマガジン登録やキャンペーン告知に適している
閉じるボタンを配置することでユーザーが操作を選択できる

ライトボックスは画面の中央に表示されるため、ユーザーが必ず目にする仕組みです。背景をクリックできないようにすることで、ポップアップの内容に集中してもらえますが、ユーザー体験を損なう可能性もあるため、表示タイミングには注意が必要です。

スライドイン

スライドインとは、画面の端から滑らかにスライドして表示されるポップアップです。ライトボックスと比較してユーザー体験を損ないにくく、控えめに情報を伝えたい場合に適しています。

主な特徴は、以下の通りです。

画面の右下や左下から表示される
背景の操作を妨げない非モーダル形式
チャットサポートやクーポン配布に適している
アニメーションで自然に表示される

スライドインは、ユーザーがコンテンツを閲覧している最中でも邪魔にならないため、継続的に情報を提供する場合に有効です。画面の端に配置されることで、ユーザーが必要に応じて確認できる形式となり、離脱率の上昇を抑えられます。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

フルスクリーン

フルスクリーンとは、画面全体を覆う形式のポップアップです。最も強いインパクトを与えられるため、特別なキャンペーンや重要な告知を行う際に適しています。

主な特徴は、以下の通りです。

画面全体を使用するため情報量を多く伝えられる
ユーザーの注意を完全に引きつける
期間限定セールや新商品発表に適している
閉じるボタンを目立つ位置に配置する必要がある

フルスクリーンは、ユーザー体験への影響が最も大きいポップアップ形式です。そのため、使用頻度を抑え、本当に重要な情報のみに限定して使用することが推奨されます。閉じるボタンは分かりやすい位置に配置し、ユーザーがすぐに閉じられるようにする配慮が必要です。

フローティングバー

フローティングバーとは、画面の上部や下部に固定表示されるバー形式のポップアップです。スクロールしても常に表示され続けるため、継続的に情報を伝えたい場合に適しています。

主な特徴は、以下の通りです。

画面の上部または下部に固定表示される
コンテンツの閲覧を大きく妨げない
お知らせやクーポン情報の表示に適している
閉じるボタンで非表示にできる

フローティングバーは、ユーザーがページをスクロールしても常に表示されるため、重要な情報を継続的に提供できます。高さが低く設定されることが多いため、コンテンツの閲覧を大きく妨げることなく、自然に情報を届けられる形式です。

コピペでポップアップを実装するサンプルコード

全てのセクションで解説した内容をまとめ、コピペでWebサイトにポップアップを実装できるようにしました。カスタムデザインのポップアップを実装したい方は、ぜひご活用ください。

index.html

以下の箇所を、実際のプロジェクトに合わせて変更してください。

ポップアップのタイトル:「ポップアップタイトル」を実際のタイトルに変更
ポップアップの本文:「ここにポップアップの内容を記載します。」を実際の内容に変更
CSSファイルのパス:style.cssのパスを実際のファイル配置に合わせて変更
JavaScriptファイルのパス:script.jsのパスを実際のファイル配置に合わせて変更

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ポップアップサンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- ポップアップを開くボタン -->
  <button class="open-button" onclick="openPopup()">ポップアップを開く</button>

  <!-- ポップアップの本体 -->
  <div class="popup-overlay" id="popup">
    <div class="popup-content">
      <span class="popup-close" onclick="closePopup()">×</span>
      <h2>ポップアップタイトル</h2>
      <p>ここにポップアップの内容を記載します。</p>
      <button class="popup-button" onclick="closePopup()">閉じる</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

style.css

以下の箇所を、実際のプロジェクトに合わせて変更してください。

背景色の透明度:rgba(0, 0, 0, 0.6)の4番目の値を変更して透明度を調整
ポップアップの幅:max-widthの値を変更してポップアップの横幅を調整
角丸のサイズ:border-radiusの値を変更して角の丸みを調整
ボタンの色:backgroundやcolorの値を変更してボタンのデザインを調整

/* ボタンのスタイル */
.open-button {
  padding: 12px 24px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.open-button:hover {
  background-color: #0056b3;
}

/* ポップアップのオーバーレイ */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  animation: fadeIn 0.3s;
}

/* フェードインアニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ポップアップのコンテンツ */
.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 90%;
  animation: slideDown 0.3s;
}

/* スライドダウンアニメーション */
@keyframes slideDown {
  from {
    transform: translate(-50%, -60%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

/* 閉じるボタン */
.popup-close {
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
  font-size: 28px;
  color: #666;
  transition: color 0.2s;
}

.popup-close:hover {
  color: #333;
}

/* ポップアップ内のテキスト */
.popup-content h2 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 24px;
}

.popup-content p {
  margin: 0 0 24px 0;
  color: #666;
  line-height: 1.6;
  font-size: 16px;
}

/* ポップアップ内のボタン */
.popup-button {
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.popup-button:hover {
  background-color: #218838;
}

script.js

以下の箇所を、実際のプロジェクトに合わせて変更してください。

ポップアップのID:document.getElementById('popup')の'popup'を実際のIDに変更
自動表示の遅延時間:setTimeout内の3000を変更してポップアップの表示タイミングを調整（ミリ秒単位）
背景クリックで閉じる機能:overlay.onclick部分を削除すると背景クリックで閉じなくなる

// ポップアップを開く関数
function openPopup() {
  const popup = document.getElementById('popup');
  popup.style.display = 'block';
}

// ポップアップを閉じる関数
function closePopup() {
  const popup = document.getElementById('popup');
  popup.style.display = 'none';
}

// 背景をクリックした時にポップアップを閉じる
const overlay = document.getElementById('popup');
overlay.onclick = function(event) {
  if (event.target === overlay) {
    closePopup();
  }
};

// ページ読み込みから3秒後に自動でポップアップを表示（オプション）
window.addEventListener('load', function() {
  setTimeout(function() {
    openPopup();
  }, 3000);
});

// ESCキーでポップアップを閉じる
document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    closePopup();
  }
});

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。