HTML・CSS・JavaScriptでポップアップを作る方法｜コピペOKの完全ガイド【2026年最新】

「自分のサイトにポップアップを表示したいけど、どうやって作ればいいかわからない…」そんな悩みを抱えていませんか。キャンペーン告知やメルマガ登録、離脱防止など、ポップアップはWebサイトのコンバージョンを大きく左右する重要な要素です。しかし、実装方法を調べても断片的な情報ばかりで、結局どの方法が自分に合っているのか迷ってしまう方も多いでしょう。本記事では、HTML・CSS・JavaScriptを使ったポップアップの作り方を、初心者でもコピペで再現できるサンプルコード付きで徹底解説します。最後まで読めば、目的に合った最適なポップアップを自力で実装できるようになります。

ポップアップとは？種類と仕組みを理解しよう

Webサイトにおけるポップアップの役割と用途

ポップアップとは、Webページ上にユーザーの注意を引くために一時的に表示される小さなウィンドウのことです。通常のページコンテンツの上に重なるように表示され、特定の情報やアクションをユーザーに促す役割を担います。

ポップアップが活用される代表的な場面は以下のとおりです。

ポップアップは使い方次第でコンバージョン率の向上やユーザーエンゲージメントの改善に大きく貢献します。一方で、不適切な実装はユーザー体験を損ない、サイトからの離脱を招くリスクもあるため、目的に応じた適切な種類と表示タイミングの選択が重要です。

ポップアップの4つの種類（ライトボックス・スライドイン・フルスクリーン・フローティングバー）

ポップアップには表示方法やデザインによって大きく4つの種類があります。それぞれ特徴が異なるため、目的や伝えたい内容に応じて使い分けることが大切です。

ライトボックスは視認性が高く確実に情報を届けたい場面に適しています。一方、スライドインやフローティングバーはユーザー体験への影響が比較的小さいため、ページの閲覧中に自然に情報を届けたい場合に効果的です。フルスクリーンは最もインパクトが大きい反面、表示頻度を抑えて本当に重要な告知に限定して使うことが推奨されます。

モーダルと非モーダルの違い

ポップアップを理解するうえで「モーダル」と「非モーダル」の違いを押さえておくことが重要です。結論として、モーダルはユーザーの操作を一時的に制限するポップアップ、非モーダルはユーザーの操作を制限しないポップアップです。

モーダルポップアップは、表示されている間は背景のコンテンツをクリックしたりスクロールしたりできません。ユーザーはポップアップ内のアクション（閉じるボタンを押す、フォームを送信するなど）を完了しなければ元の画面に戻れない仕組みです。確認ダイアログやログインフォームなど、ユーザーの注意を確実に集める必要がある場面で使われます。

非モーダルポップアップは、表示されている間もユーザーは背景のコンテンツを自由に操作できます。スライドインやフローティングバーが代表例で、ユーザーの閲覧体験を損なわずに補助的な情報を提供できる点が大きなメリットです。

どちらが優れているということではなく、伝えたい情報の重要度やユーザーの状況に応じて適切に使い分けることがポイントです。

【方法①】JavaScript標準メソッドで作るポップアップ（alert / confirm / prompt）

alert（）でシンプルな通知を表示する

最も手軽にポップアップを表示する方法は、JavaScriptのalert()メソッドを使うことです。alert()はブラウザに標準で搭載されている機能で、わずか1行のコードでメッセージウィンドウを表示できます。

alert("これはアラートメッセージです");

上記のコードを実行すると、ブラウザの画面中央にメッセージが表示され、ユーザーが「OK」ボタンを押すまで他の操作を受け付けません。重要な通知やエラーメッセージの表示など、ユーザーに確実に情報を伝えたい場面で使われます。

ボタンをクリックしたときにalert()を実行する場合は、以下のようにHTMLとJavaScriptを組み合わせます。

<button onclick="alert('ボタンが押されました')">クリック</button>

alert()はコードが非常にシンプルで実装のハードルが低い反面、デザインをカスタマイズできないという制限があります。表示される見た目はブラウザによって異なり、サイトのデザインに合わせることもできません。そのため、開発中のデバッグや簡易的な通知用途には向いていますが、本番環境のWebサイトで使用することはほとんどありません。

confirm（）でユーザーに確認を求める

confirm()は、ユーザーに「OK」と「キャンセル」の2つの選択肢を提示できるポップアップメソッドです。alert()との違いは、ユーザーの選択結果を受け取って処理を分岐できる点にあります。

const result = confirm("この操作を実行しますか？");
if (result) {
  // OKが押された場合の処理
  alert("実行しました");
} else {
  // キャンセルが押された場合の処理
  alert("キャンセルしました");
}

confirm()はユーザーが「OK」をクリックするとtrueを、「キャンセル」をクリックするとfalseを返します。この戻り値をif文で判定することで、ユーザーの選択に応じた処理の切り替えが可能です。

データの削除前に「本当に削除しますか？」と確認する場面や、フォーム送信前に入力内容の最終確認を行う場面など、ユーザーに意思決定を促したいケースに適しています。ただし、alert()と同様にデザインのカスタマイズはできません。

prompt（）でユーザー入力を受け取る

prompt()は、ユーザーにテキスト入力を求めるポップアップメソッドです。メッセージとともに入力欄が表示され、ユーザーが入力した値をJavaScript上で受け取ることができます。

const name = prompt("お名前を入力してください");
if (name) {
  alert("こんにちは、" + name + "さん！");
}

prompt()はユーザーが入力した値を文字列として返します。「キャンセル」をクリックした場合はnullが返されるため、入力の有無を判定して処理を分岐することも可能です。第二引数にデフォルト値を指定すれば、あらかじめ入力欄にテキストを表示しておくこともできます。

const age = prompt("年齢を入力してください", "20");

prompt()はユーザーから直接情報を取得したい場面で利用できますが、見た目のカスタマイズができない点や、セキュリティ上の懸念から、現在の実務ではほぼ使われません。ユーザーからの入力にはHTMLのフォーム要素を使ったカスタムポップアップが推奨されます。

標準メソッドのメリット・デメリットと使いどころ

JavaScript標準の3つのメソッドについて、メリットとデメリットを整理します。

これらのメソッドは、開発中のデバッグ確認やプロトタイプの簡易テストなど、一時的な利用には便利です。しかし、実際のWebサイトやWebアプリケーションでは、次のセクションで解説するカスタムポップアップを使って実装するのが一般的です。サイトのブランドイメージに合ったデザインや、レスポンシブ対応、アニメーション表現が必要な場合は、HTML・CSS・JavaScriptを組み合わせたカスタム実装を選びましょう。

【方法②】HTML＋CSSだけで作るポップアップ（JavaScript不要）

checkboxとlabelを活用したCSS onlyポップアップ

JavaScriptを使わずにポップアップを実装する方法の1つが、HTMLの<input type="checkbox">と<label>を組み合わせるテクニックです。チェックボックスのオン・オフをCSSで検知して、ポップアップの表示・非表示を切り替える仕組みで動作します。

<input type="checkbox" id="popup">
<label class="popup-open" for="popup">ポップアップを表示する</label>
<div class="popup-overlay">
  <div class="popup-window">
    <p>ポップアップの中身のテキスト</p>
    <label class="popup-close" for="popup">×</label>
  </div>
</div>

#popup {
  display: none;
}

.popup-open {
  cursor: pointer;
  color: #007bff;
  text-decoration: underline;
}

.popup-overlay {
  display: none;
}

#popup:checked ~ .popup-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.popup-window {
  width: 90vw;
  max-width: 500px;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 8px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
}

ポイントは#popup:checked ~ .popup-overlayというCSSセレクタです。これは「idがpopupのチェックボックスにチェックが入ったら、同じ階層にある.popup-overlayにスタイルを適用する」という意味です。<label>をクリックするとチェックボックスのオン・オフが切り替わるため、JavaScriptなしでポップアップの開閉が実現できます。

この方法はコードがシンプルで、JavaScriptの読み込みが不要なためページの表示速度に影響を与えない点がメリットです。ただし、時間差での自動表示やスクロール連動表示などの高度な制御はできません。

HTML popover属性で実装するモダンなポップアップ

2025年にすべての主要ブラウザ（Chrome、Firefox、Safari、Edge）で対応が完了したpopover属性を使えば、さらにシンプルにポップアップを実装できます。HTMLの属性だけでポップアップの基本動作が完結する、最もモダンな方法です。

<button popovertarget="my-popup">ポップアップを開く</button>

<div id="my-popup" popover>
  <h3>お知らせ</h3>
  <p>ポップアップの内容がここに表示されます。</p>
</div>

このコードだけで、ボタンをクリックするとポップアップが表示され、ポップアップの外側をクリックするかESCキーを押すと自動的に閉じる動作が実現します。JavaScriptは一切不要です。

popover属性には以下の値を設定できます。

CSSでデザインを自由にカスタマイズすることも可能です。

[popover] {
  padding: 24px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  max-width: 400px;
}

[popover]::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

popover属性は「トップレイヤー」に配置されるため、従来のz-indexの問題（他の要素に隠れてしまう）が発生しません。シンプルなポップアップを素早く実装したい場合に最適な方法です。

HTML dialog要素でネイティブモーダルを作る方法

HTMLの<dialog>要素は、ブラウザ標準のモーダルダイアログを作成するための専用タグです。popover属性と異なり、フォーカストラップ（モーダル内にキーボードフォーカスを閉じ込める機能）が組み込まれているため、アクセシビリティに優れたモーダルポップアップを実装できます。

<button onclick="document.getElementById('my-dialog').showModal()">
  モーダルを開く
</button>

<dialog id="my-dialog">
  <h3>確認</h3>
  <p>この操作を実行しますか？</p>
  <form method="dialog">
    <button value="cancel">キャンセル</button>
    <button value="ok">OK</button>
  </form>
</dialog>

<dialog>要素には2つの表示方法があります。

showModal()で開いた場合は、自動的にバックドロップ（半透明の背景）が表示され、ESCキーで閉じることもできます。<form method="dialog">を使えば、フォーム内のボタンクリックでダイアログを自動的に閉じる動作も標準で実現できます。

dialog {
  padding: 30px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  max-width: 450px;
  width: 90%;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

<dialog>要素はフォーカス管理やESCキーでの閉じ動作などが標準で備わっているため、自前でJavaScriptを書く量を大幅に削減できます。アクセシビリティが重要な場面や、ユーザーの確認操作が必要なモーダルには<dialog>要素の使用が強く推奨されます。

popover属性とdialog要素の違い・使い分け

popover属性と<dialog>要素は見た目が似ていますが、機能面で明確な違いがあります。どちらを使うべきかは、ポップアップの目的によって判断しましょう。

使い分けの目安はシンプルです。「ユーザーの操作を止めて対応を求める必要がある」場合は<dialog>要素を、「補足情報を軽く表示したい」場合はpopover属性を選びましょう。どちらもブラウザのトップレイヤーに配置されるため、z-indexの問題が起きない点は共通のメリットです。

【方法③】HTML＋CSS＋JavaScriptで作るカスタムモーダルポップアップ

Step1：HTMLでポップアップの構造を作成する

デザインや動作を自由に制御したい場合は、HTML・CSS・JavaScriptを組み合わせたカスタムモーダルポップアップが最適です。まずHTMLでポップアップの骨組みを作成しましょう。

<!-- トリガーボタン -->
<button class="open-button" id="openBtn">ポップアップを開く</button>

<!-- ポップアップ本体 -->
<div class="popup-overlay" id="popup">
  <div class="popup-content">
    <button class="popup-close" id="closeBtn" aria-label="閉じる">&times;</button>
    <h2>ポップアップタイトル</h2>
    <p>ここにポップアップの内容を記載します。キャンペーン情報やフォームなど、用途に合わせて自由に変更してください。</p>
    <button class="popup-button" id="actionBtn">詳しく見る</button>
  </div>
</div>

HTML構造のポイントは以下の3つです。

.popup-overlayはポップアップの背景（半透明のオーバーレイ）を担う要素です。画面全体を覆うことで、ユーザーの注目をポップアップに集中させます。.popup-contentはポップアップの本体部分で、タイトル・テキスト・ボタンなどの実際のコンテンツを配置します。.popup-closeはポップアップを閉じるための×ボタンで、aria-label="閉じる"を付与することでスクリーンリーダーにも対応しています。

この基本構造をベースにして、次のステップでCSSとJavaScriptを追加していきます。

Step2：CSSでオーバーレイとモーダルのデザインを整える

HTMLの構造ができたら、CSSでポップアップの見た目を整えます。ここではオーバーレイの背景色、ポップアップの配置、閉じるボタン、テキスト、アクションボタンのスタイルをまとめて設定します。

/* トリガーボタン */
.open-button {
  padding: 12px 24px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  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;
}

/* ポップアップ本体 */
.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 90%;
}

/* 閉じるボタン */
.popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  color: #666666;
  cursor: pointer;
  transition: color 0.2s;
}

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

/* テキスト */
.popup-content h2 {
  margin: 0 0 16px 0;
  color: #333333;
  font-size: 22px;
}

.popup-content p {
  margin: 0 0 24px 0;
  color: #666666;
  line-height: 1.7;
  font-size: 15px;
}

/* アクションボタン */
.popup-button {
  padding: 10px 24px;
  background-color: #28a745;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
}

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

CSSで押さえるべきポイントは3つあります。.popup-overlayにposition: fixedとwidth: 100%; height: 100%を設定して画面全体を覆うこと、.popup-contentにposition: absoluteとtransform: translate(-50%, -50%)を設定して画面中央に配置すること、そして初期状態でdisplay: noneを指定してポップアップを非表示にしておくことです。

Step3：JavaScriptで表示・非表示を制御する

最後に、JavaScriptでポップアップの表示と非表示を制御する処理を追加します。

// 要素の取得
const popup = document.getElementById('popup');
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');

// ポップアップを開く
openBtn.addEventListener('click', function() {
  popup.style.display = 'block';
});

// 閉じるボタンでポップアップを閉じる
closeBtn.addEventListener('click', function() {
  popup.style.display = 'none';
});

document.getElementById()で必要な要素を取得し、addEventListener()でクリックイベントを登録します。ポップアップを開くときはdisplayプロパティをblockに、閉じるときはnoneに変更するだけの非常にシンプルな処理です。

onclick属性をHTMLに直接書く方法もありますが、HTMLとJavaScriptを分離するaddEventListener方式のほうが保守性に優れており、実務では推奨されます。

背景クリック・ESCキーで閉じる機能を追加する

ユーザビリティを高めるために、背景のオーバーレイをクリックしたときやESCキーを押したときにもポップアップが閉じるようにしましょう。この2つの機能はポップアップ実装において標準的に求められる動作です。

// 背景クリックで閉じる
popup.addEventListener('click', function(event) {
  if (event.target === popup) {
    popup.style.display = 'none';
  }
});

// ESCキーで閉じる
document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    popup.style.display = 'none';
  }
});

背景クリックの処理では、event.target === popupという条件で「クリックされた要素がオーバーレイ自身である場合のみ」閉じる処理を実行しています。この条件がないと、ポップアップの中身をクリックしたときにも閉じてしまうため注意が必要です。

ESCキーの処理では、document全体にkeydownイベントを登録し、event.keyが'Escape'の場合にポップアップを閉じます。複数のポップアップが存在する場合は、現在表示中のポップアップだけを閉じるように条件分岐を追加すると良いでしょう。

フェードイン・スライドダウンのアニメーションをCSSで実装する

ポップアップの表示にアニメーションを加えると、ユーザーに洗練された印象を与えられます。CSSの@keyframesを使ったフェードインとスライドダウンのアニメーションを追加しましょう。

/* オーバーレイのフェードイン */
.popup-overlay.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ポップアップ本体のスライドダウン */
.popup-overlay.active .popup-content {
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    transform: translate(-50%, -60%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

アニメーションを使う場合は、JavaScriptでの表示切り替えをstyle.displayではなくクラスの追加・削除で行うように変更します。

// ポップアップを開く（クラス付与方式）
openBtn.addEventListener('click', function() {
  popup.classList.add('active');
});

// ポップアップを閉じる（クラス削除方式）
function closePopup() {
  popup.classList.remove('active');
}

closeBtn.addEventListener('click', closePopup);

popup.addEventListener('click', function(event) {
  if (event.target === popup) {
    closePopup();
  }
});

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    closePopup();
  }
});

CSSのデフォルト状態をdisplay: noneからopacity: 0; pointer-events: none; visibility: hidden;に変更し、.activeクラスが付与されたときにopacity: 1; pointer-events: auto; visibility: visible;にする方法を使えば、閉じるときのフェードアウトアニメーションも実現可能です。

コピペで使えるポップアップ実装サンプルコード集

基本のモーダルポップアップ（ライトボックス型）

最も汎用的なライトボックス型のモーダルポップアップのサンプルコードです。HTML・CSS・JavaScriptの3ファイル構成で、コピペしてすぐに使えます。

index.html

<!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" id="openBtn">ポップアップを開く</button>

  <div class="popup-overlay" id="popup">
    <div class="popup-content" role="dialog" aria-modal="true" aria-labelledby="popup-title">
      <button class="popup-close" id="closeBtn" aria-label="閉じる">&times;</button>
      <h2 id="popup-title">キャンペーンのお知らせ</h2>
      <p>期間限定で全商品20%OFF！この機会をお見逃しなく。</p>
      <button class="popup-button" id="actionBtn">詳しく見る</button>
    </div>
  </div>

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

style.css

.open-button {
  padding: 12px 24px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 6px;
  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 ease;
}

.popup-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 90%;
  animation: slideDown 0.3s ease;
}

.popup-close {
  position: absolute;
  top: 12px; right: 16px;
  background: none; border: none;
  font-size: 28px; color: #666;
  cursor: pointer;
}
.popup-close:hover { color: #333; }

.popup-content h2 { margin: 0 0 16px; color: #333; font-size: 22px; }
.popup-content p { margin: 0 0 24px; color: #666; line-height: 1.7; font-size: 15px; }

.popup-button {
  padding: 10px 24px;
  background-color: #28a745;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
}
.popup-button:hover { background-color: #218838; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown {
  from { transform: translate(-50%, -60%); opacity: 0; }
  to   { transform: translate(-50%, -50%); opacity: 1; }
}

script.js

const popup = document.getElementById('popup');
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');

function openPopup() { popup.style.display = 'block'; }
function closePopup() { popup.style.display = 'none'; }

openBtn.addEventListener('click', openPopup);
closeBtn.addEventListener('click', closePopup);
popup.addEventListener('click', function(e) { if (e.target === popup) closePopup(); });
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closePopup(); });

タイトルや本文を書き換えるだけで、キャンペーン告知やメルマガ登録など様々な用途に活用できます。

右下からスライドインするポップアップ

ユーザーの閲覧を妨げずに情報を届けたい場合は、画面右下からスライドインする非モーダル型のポップアップが効果的です。

<div class="slide-in-popup" id="slidePopup">
  <button class="slide-close" id="slideClose">&times;</button>
  <p>お得なクーポンをプレゼント中！</p>
  <button class="slide-button">クーポンを受け取る</button>
</div>

.slide-in-popup {
  position: fixed;
  bottom: -300px;
  right: 20px;
  width: 320px;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transition: bottom 0.5s ease;
}

.slide-in-popup.visible {
  bottom: 0;
}

.slide-close {
  position: absolute;
  top: 8px; right: 12px;
  background: none; border: none;
  font-size: 22px; color: #999;
  cursor: pointer;
}

.slide-in-popup p { margin: 0 0 16px; color: #333; font-size: 14px; }

.slide-button {
  padding: 8px 20px;
  background-color: #ff6b35;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

const slidePopup = document.getElementById('slidePopup');
const slideClose = document.getElementById('slideClose');

// 3秒後にスライドイン表示
window.addEventListener('load', function() {
  setTimeout(function() {
    slidePopup.classList.add('visible');
  }, 3000);
});

slideClose.addEventListener('click', function() {
  slidePopup.classList.remove('visible');
});

CSSのtransitionプロパティを使い、bottomの値を変化させることで滑らかなスライドアニメーションを実現しています。

画面上部に固定表示するフローティングバー

常時表示でユーザーにお知らせを届けたい場合は、フローティングバーが適しています。

<div class="floating-bar" id="floatingBar">
  <p>送料無料キャンペーン実施中！ <a href="#">詳しくはこちら</a></p>
  <button class="bar-close" id="barClose">&times;</button>
</div>

.floating-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #1a1a2e;
  color: #ffffff;
  padding: 12px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-size: 14px;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
}

.floating-bar.visible {
  transform: translateY(0);
}

.floating-bar p { margin: 0; }
.floating-bar a { color: #e94560; font-weight: bold; }

.bar-close {
  position: absolute;
  right: 16px;
  background: none; border: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
}

const floatingBar = document.getElementById('floatingBar');
const barClose = document.getElementById('barClose');

window.addEventListener('load', function() {
  setTimeout(function() {
    floatingBar.classList.add('visible');
  }, 1000);
});

barClose.addEventListener('click', function() {
  floatingBar.classList.remove('visible');
});

画面上部に固定表示されるため、スクロールしても常にユーザーの目に入ります。高さを抑えたシンプルなデザインにすることで、コンテンツの閲覧を大きく妨げることなく情報を伝えることが可能です。

フルスクリーンポップアップ

最大のインパクトでユーザーの注目を集めたい場面では、フルスクリーンポップアップが効果的です。

<div class="fullscreen-popup" id="fullPopup">
  <div class="fullscreen-inner">
    <button class="full-close" id="fullClose">&times;</button>
    <h2>期間限定セール開催中</h2>
    <p>全商品最大50%OFF！今すぐチェック</p>
    <button class="full-button">セール会場へ</button>
  </div>
</div>

.fullscreen-popup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 1000;
  animation: fadeIn 0.5s ease;
}

.fullscreen-inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;
}

.fullscreen-inner h2 { font-size: 32px; margin-bottom: 16px; }
.fullscreen-inner p { font-size: 18px; margin-bottom: 32px; opacity: 0.9; }

.full-close {
  position: fixed;
  top: 20px; right: 24px;
  background: none; border: none;
  color: #ffffff;
  font-size: 36px;
  cursor: pointer;
}

.full-button {
  padding: 14px 40px;
  background-color: #ffffff;
  color: #764ba2;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

const fullPopup = document.getElementById('fullPopup');
const fullClose = document.getElementById('fullClose');

// 表示のトリガー（任意のタイミングで呼び出す）
function showFullPopup() { fullPopup.style.display = 'block'; }

fullClose.addEventListener('click', function() {
  fullPopup.style.display = 'none';
});

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') fullPopup.style.display = 'none';
});

フルスクリーンポップアップはUXへの影響が最も大きい形式です。使用頻度を最小限に抑え、閉じるボタンを目立つ位置に配置して、ユーザーがすぐに閉じられるように配慮することが重要です。

実践で差がつくポップアップの応用テクニック

ページ読み込みから数秒後に自動表示する方法

ポップアップをページ読み込みから一定時間後に自動表示するのは、キャンペーン告知やメルマガ登録促進でよく使われるテクニックです。setTimeout()関数を使うことで、ミリ秒単位で表示タイミングを制御できます。

window.addEventListener('load', function() {
  setTimeout(function() {
    document.getElementById('popup').style.display = 'block';
  }, 5000); // 5秒後に表示
});

表示タイミングは用途によって調整しましょう。一般的に、ページ読み込み直後（0〜2秒）の表示はユーザーの離脱を招きやすいため、3〜5秒程度の遅延が推奨されます。ユーザーがコンテンツを読み始めてからポップアップが表示されることで、情報を受け取る準備ができた状態でメッセージを届けられます。

スクロール率をトリガーにして表示する方法

ページを一定割合スクロールしたタイミングでポップアップを表示する方法は、コンテンツに興味を持っているユーザーに対して効果的にアプローチできます。

let popupShown = false;

window.addEventListener('scroll', function() {
  if (popupShown) return;

  const scrollPercent = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;

  if (scrollPercent >= 50) {
    document.getElementById('popup').style.display = 'block';
    popupShown = true;
  }
});

上記の例では、ページの50%をスクロールした時点でポップアップを表示しています。popupShownフラグを使って一度だけ表示されるように制御している点がポイントです。このフラグがないと、スクロールのたびにポップアップが表示されてしまいます。

スクロール率のしきい値はページの長さやコンテンツの性質に応じて調整してください。記事ページであれば50〜70%、ランディングページであれば30〜50%が目安です。

離脱防止ポップアップの実装（mouseleaveイベント）

ユーザーがページから離れようとした瞬間にポップアップを表示する「離脱防止ポップアップ」は、ECサイトやランディングページで高いコンバージョン効果を発揮します。マウスカーソルがブラウザの上部に移動した（＝タブを閉じる・アドレスバーに移動する動き）タイミングを検知して表示します。

document.addEventListener('mouseleave', function(event) {
  if (event.clientY < 0) {
    document.getElementById('popup').style.display = 'block';
  }
}, { once: true });

event.clientY < 0という条件で「マウスカーソルが画面上部から外に出た」ことを判定しています。{ once: true }オプションを指定することで、イベントが1回だけ発火するように制御しています。

ただし、mouseleaveイベントはマウスを使うデスクトップ環境でのみ動作します。スマートフォンやタブレットでは検知できないため、モバイル向けには「戻るボタンの検知」や「スクロール率トリガー」を組み合わせることが実践的です。

localStorageで表示回数・頻度を制御する方法

同じユーザーに何度もポップアップを表示すると、ユーザー体験が著しく悪化します。localStorageを活用して、ポップアップの表示回数や表示間隔を制御しましょう。

function shouldShowPopup() {
  const lastShown = localStorage.getItem('popup_last_shown');
  const now = Date.now();
  const ONE_DAY = 24 * 60 * 60 * 1000;

  // 前回表示から24時間経過していなければ表示しない
  if (lastShown && (now - parseInt(lastShown)) < ONE_DAY) {
    return false;
  }
  return true;
}

function showPopupWithControl() {
  if (shouldShowPopup()) {
    document.getElementById('popup').style.display = 'block';
    localStorage.setItem('popup_last_shown', Date.now().toString());
  }
}

上記のコードは「前回の表示から24時間以上経過した場合のみポップアップを表示する」というロジックです。localStorageに最終表示時刻を保存し、次回訪問時にその値と現在時刻を比較して表示可否を判定しています。

表示間隔はサイトの特性に応じて調整してください。ECサイトのセール告知であれば1日1回、メルマガ登録であれば1週間に1回程度が一般的な目安です。

レスポンシブ対応のポイント（メディアクエリの使い方）

ポップアップはパソコンだけでなく、スマートフォンやタブレットでも正しく表示される必要があります。CSSのメディアクエリを使って、画面サイズに応じたスタイル調整を行いましょう。

/* デスクトップ（デフォルト） */
.popup-content {
  max-width: 500px;
  width: 90%;
  padding: 40px;
}

/* タブレット（768px以下） */
@media (max-width: 768px) {
  .popup-content {
    max-width: 90%;
    padding: 30px;
    font-size: 14px;
  }
}

/* スマートフォン（480px以下） */
@media (max-width: 480px) {
  .popup-content {
    max-width: 95%;
    padding: 20px 16px;
    border-radius: 8px;
  }

  .popup-content h2 {
    font-size: 18px;
  }

  .popup-close {
    font-size: 24px;
    top: 8px;
    right: 12px;
  }
}

レスポンシブ対応で特に注意すべきポイントは以下の3つです。ポップアップの横幅を%やvwで指定して画面からはみ出さないようにすること、閉じるボタンをタッチしやすい大きさ（44px×44px以上）にすること、そしてフォントサイズを16px以上に設定してスマートフォンでの意図しないズームを防ぐことです。

ポップアップの実装・運用を「もっと簡単に」始めたい方へ

本記事ではHTML・CSS・JavaScriptによるポップアップの自作方法を解説しましたが、「コードを書く時間がない」「離脱防止の効果を最大化したい」「ABテストで最適なポップアップを見つけたい」という方には、離脱防止ポップアップツール DataPush（データプッシュ） がおすすめです。

DataPushは、サイトにJavaScriptコードを1行追加するだけで、離脱直前のユーザーに最適なポップアップを自動表示できるツールです。コーディング不要の豊富なテンプレート、ページ単位での出し分け、ABテスト機能、詳細な分析レポートなど、本記事で解説した応用テクニックをすべてノーコードで実現できます。

フリープランなら 月額0円・クレジットカード不要 で今すぐ始められます。

▶ DataPushに無料で会員登録する

ポップアップのアクセシビリティとUXの注意点

WAI-ARIAロール（role=“dialog”）とaria属性の設定

アクセシビリティに配慮したポップアップを作るためには、WAI-ARIAの属性を適切に設定する必要があります。WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）は、スクリーンリーダーなどの支援技術に対して、要素の役割や状態を伝えるための仕様です。

ポップアップに設定すべき主なARIA属性は以下のとおりです。

具体的なHTMLの記述例は以下のとおりです。

<div class="popup-content"
     role="dialog"
     aria-modal="true"
     aria-labelledby="popup-title"
     aria-describedby="popup-desc">
  <h2 id="popup-title">キャンペーンのお知らせ</h2>
  <p id="popup-desc">期間限定で全商品20%OFFです。</p>
  <button>詳しく見る</button>
</div>

なお、HTML標準の<dialog>要素をshowModal()で開いた場合は、これらの属性の多くがブラウザによって自動的に処理されます。カスタム実装のポップアップを使う場合にARIA属性の手動設定が必要になると覚えておきましょう。

キーボード操作とフォーカストラップの実装

モーダルポップアップが表示されている間、キーボードのTabキーでモーダルの外の要素にフォーカスが移動してしまうと、スクリーンリーダーのユーザーが混乱する原因になります。モーダル内にフォーカスを閉じ込める「フォーカストラップ」を実装しましょう。

function trapFocus(element) {
  const focusableElements = element.querySelectorAll(
    'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
  );
  const firstFocusable = focusableElements[0];
  const lastFocusable = focusableElements[focusableElements.length - 1];

  // モーダルが開いたら最初のフォーカス可能な要素にフォーカスを移動
  firstFocusable.focus();

  element.addEventListener('keydown', function(e) {
    if (e.key !== 'Tab') return;

    if (e.shiftKey) {
      // Shift+Tabで最初の要素から戻ったら最後の要素へ
      if (document.activeElement === firstFocusable) {
        e.preventDefault();
        lastFocusable.focus();
      }
    } else {
      // Tabで最後の要素から進んだら最初の要素へ
      if (document.activeElement === lastFocusable) {
        e.preventDefault();
        firstFocusable.focus();
      }
    }
  });
}

このコードは、モーダル内のフォーカス可能な要素を取得し、最初の要素と最後の要素の間でフォーカスをループさせる処理です。HTML標準の<dialog>要素をshowModal()で開けばこの処理がブラウザによって自動的に行われるため、可能であれば<dialog>要素の使用を推奨します。

ユーザー体験を損なわないポップアップ設計のコツ

ポップアップはユーザーの注目を集める強力な手段ですが、不適切な使い方は逆効果になります。ユーザー体験を守りながら効果を最大化するための設計ポイントを押さえておきましょう。

表示タイミングについては、ページ読み込み直後の即時表示は避け、3〜5秒の遅延またはスクロール率トリガーを使ってユーザーがコンテンツに関心を持ったタイミングで表示することが効果的です。

閉じるボタンは必ず目立つ位置（右上が一般的）に配置し、タッチデバイスでも操作しやすいサイズ（44px×44px以上）にしてください。閉じるボタンが見つけにくいポップアップは、ユーザーに強いストレスを与えます。

表示頻度のコントロールも重要です。同じユーザーに何度もポップアップを表示すると離脱率が高まります。前述のlocalStorageを使った表示回数制御を必ず実装しましょう。

モバイルではGoogleの「煩わしいインタースティシャル」のガイドラインに注意が必要です。ページのコンテンツをほぼ全面覆うポップアップはモバイル検索のランキングに悪影響を与える可能性があります。

SEO・Core Web Vitalsへの影響と対策

ポップアップの実装方法によっては、SEOやCore Web Vitalsに悪影響を及ぼす可能性があります。

CLS（Cumulative Layout Shift）はページの読み込み中にレイアウトが意図せずずれる量を測る指標です。ポップアップが表示されたときにページのコンテンツが押し下げられるような実装は、CLSスコアを悪化させます。position: fixedを使ったオーバーレイ表示であれば、既存コンテンツのレイアウトに影響しないためCLSへの影響を回避できます。

INP（Interaction to Next Paint）はユーザーの操作に対するページの応答速度を測る指標です。ポップアップの開閉処理が重いJavaScriptを実行する場合、INPスコアが悪化します。アニメーションにはCSSのtransformやopacityを使い、JavaScript側の処理を最小限に抑えましょう。

Googleのモバイルフレンドリーガイドラインでは、モバイルでメインコンテンツを覆い隠すインタースティシャル（ポップアップ）はランキングを下げる要因になると明記されています。法的に必要な同意取得（Cookie同意など）や年齢確認など一部の例外を除き、モバイルでのフルスクリーンポップアップは避けるべきです。

SEOに配慮したポップアップを手間なく運用するなら

ポップアップの実装では、アクセシビリティやCore Web Vitalsへの影響、Googleのインタースティシャルガイドラインへの対応など、考慮すべきポイントが多数あります。DataPushは非同期読み込みでサイトの表示速度にほとんど影響を与えず、表示頻度やタイミングの細かな制御も管理画面から簡単に設定できます。

技術的な対策をツールに任せて、コンテンツやオファーの最適化に集中しませんか？

▶ DataPushのフリープランを試してみる（無料）

ポップアップ実装でよくあるトラブルと解決方法

ポップアップが表示されない（z-indexの問題）

ポップアップが表示されない最も多い原因は、z-indexの設定が不十分で他の要素の背面に隠れてしまうケースです。

解決策は、ポップアップのオーバーレイに十分なz-index値を設定することです。一般的にはz-index: 1000以上を指定します。ただし、サイト内にz-indexが高い要素（固定ヘッダーなど）がある場合は、それを上回る値を設定する必要があります。

.popup-overlay {
  z-index: 9999;
  position: fixed; /* z-indexはpositionがstatic以外の場合のみ有効 */
}

z-indexが効かない場合は、positionプロパティが設定されているかを確認してください。z-indexはpositionがstatic（デフォルト）の要素には適用されません。また、親要素にz-indexが設定されている場合、子要素はその「スタッキングコンテキスト」の中でしか重なり順を変えられません。

この問題を根本的に解決するには、HTML標準の<dialog>要素やpopover属性を使用することを推奨します。これらはブラウザの「トップレイヤー」に配置されるため、z-indexの値に関係なく最前面に表示されます。

背景がスクロールしてしまう（スクロールロック）

モーダルポップアップが表示されている間、背景のページが通常どおりスクロールできてしまう問題は、多くの開発者が経験するトラブルです。

解決策は、ポップアップ表示中に<body>要素のスクロールを無効にすることです。

function openPopup() {
  document.getElementById('popup').style.display = 'block';
  document.body.style.overflow = 'hidden';
}

function closePopup() {
  document.getElementById('popup').style.display = 'none';
  document.body.style.overflow = '';
}

document.body.style.overflow = 'hidden'を設定することで、背景のスクロールが無効になります。ポップアップを閉じるときにoverflowを空文字に戻すことで、元のスクロール動作が復元されます。

iOSのSafariではoverflow: hiddenだけではスクロールが完全に止まらない場合があります。その場合はposition: fixedとwidth: 100%を<body>に追加し、現在のスクロール位置を保存してポップアップを閉じた際に復元する処理が必要です。

let scrollPosition = 0;

function openPopup() {
  scrollPosition = window.scrollY;
  document.body.style.position = 'fixed';
  document.body.style.top = `-${scrollPosition}px`;
  document.body.style.width = '100%';
  document.getElementById('popup').style.display = 'block';
}

function closePopup() {
  document.body.style.position = '';
  document.body.style.top = '';
  document.body.style.width = '';
  window.scrollTo(0, scrollPosition);
  document.getElementById('popup').style.display = 'none';
}

スマートフォンで表示が崩れる

スマートフォンでポップアップの表示が崩れる主な原因は、ポップアップの横幅が画面幅を超えていること、フォントサイズが小さすぎてブラウザが自動ズームしてしまうこと、閉じるボタンが画面外に配置されてしまうことの3つです。

以下のCSS設定を追加することで、多くの表示崩れを防止できます。

.popup-content {
  width: 90%;
  max-width: 500px;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .popup-content {
    width: 95%;
    padding: 20px 16px;
    margin: 0 auto;
  }

  .popup-content h2 {
    font-size: 18px;
    padding-right: 30px;
  }

  .popup-content p {
    font-size: 15px;
  }

  .popup-close {
    font-size: 24px;
    top: 8px;
    right: 12px;
  }
}

box-sizing: border-boxを設定することで、paddingを含めた要素の合計幅が指定したwidthに収まるようになります。タイトルには閉じるボタンと重ならないようにpadding-rightを設定し、フォントサイズは16px未満にしないことでiOS Safariの自動ズームを防止できます。

ポップアップが何度も表示されてしまう

ポップアップが閲覧中に何度も表示される問題は、表示制御のロジックが不十分であることが原因です。

イベントリスナーが複数回登録されている場合は、{ once: true }オプションやフラグ変数を使って重複発火を防ぎましょう。スクロールイベントでポップアップを表示する場合は、「一度表示したら再度表示しない」フラグを設ける必要があります。

同じユーザーの再訪問でもポップアップが毎回表示される問題には、前述のlocalStorageを使った表示回数制御を導入してください。以下は表示回数と表示間隔の両方を制御する実用的なコードです。

function canShowPopup(maxCount, intervalHours) {
  const data = JSON.parse(localStorage.getItem('popup_data') || '{}');
  const now = Date.now();
  const count = data.count || 0;
  const lastShown = data.lastShown || 0;
  const interval = intervalHours * 60 * 60 * 1000;

  if (count >= maxCount) return false;
  if (lastShown && (now - lastShown) < interval) return false;
  return true;
}

function recordPopupShown() {
  const data = JSON.parse(localStorage.getItem('popup_data') || '{}');
  data.count = (data.count || 0) + 1;
  data.lastShown = Date.now();
  localStorage.setItem('popup_data', JSON.stringify(data));
}

// 使用例：最大3回、24時間間隔
if (canShowPopup(3, 24)) {
  showPopup();
  recordPopupShown();
}

よくある質問

まとめ：目的に合ったポップアップ実装方法の選び方

本記事では、HTML・CSS・JavaScriptを使ったポップアップの作り方を、基本から応用まで体系的に解説しました。最後に、どの方法を選ぶべきか判断するための指針を整理します。

ポップアップの実装で最も重要なのは、「ユーザーにとって価値のある情報を、適切なタイミングで、適切な形式で届ける」ことです。アクセシビリティへの配慮、レスポンシブ対応、表示回数の制御を忘れずに、ユーザーの体験を損なわないポップアップを目指しましょう。

本記事で紹介したサンプルコードはすべてコピペで使えますので、ぜひ実際のプロジェクトで活用してみてください。

自作が難しいと感じたら、DataPushで5分でポップアップを導入しませんか？

本記事で紹介したポップアップの自作方法は、デザインの自由度が高い一方で、コーディング・レスポンシブ対応・アクセシビリティ・表示回数制御・効果測定まで自分で対応する必要があります。

DataPush（データプッシュ）なら、これらの機能がすべて揃った状態で、わずか5分でポップアップの運用を開始できます。

DataPushの主な特徴
導入方法	サイトにJSコードを1行追加するだけ
テンプレート	10種類のデザインテンプレートから選択可能
表示制御	離脱タイミング・時間帯・曜日など細かい条件設定に対応
ABテスト	複数パターンの比較・分析が可能（スタンダードプラン以上）
分析機能	表示回数・クリック率などをダッシュボードで可視化
料金	フリープラン月額0円〜（クレジットカード不要）

▶ DataPushに無料で会員登録して、今すぐ離脱防止を始める

DataPushの機能や活用事例について詳しく知りたい方は、サービスサイトもご覧ください。
→ DataPush サービスサイト

参考・引用元一覧

MDN Web Docs – HTML popover属性

MDN Web Docs – <dialog>要素

Can I use – popover ブラウザ対応状況

W3C WAI-ARIA – Dialog (Modal) Pattern

Google Search Central – ページエクスペリエンス

関連記事

ポップアップとは？意味・種類・効果と正しい活用法をわかりやすく解説

離脱防止ポップアップ完全導入・運用マニュアル｜設計・実装・改善まで徹底解説【2026年版】

ECサイトの売上を伸ばすポップアップ活用12施策

CTAボタンのクリック率を3倍にする方法｜文言・色・配置の最適化テクニック集

BtoB企業のポップアップ活用術｜リード獲得数を3倍にする完全マニュアル