JavaScriptポップアップの方法10選！初心者でも簡単に作成・カスタマイズできる！

はじめに
●JavaScriptポップアップの基本
- ○ポップアップとは
- ○JavaScriptでのポップアップ作成方法
●JavaScriptポップアップの方法10選
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでポップアップを作成・カスタマイズする方法を簡単に理解できるようになります。

初心者でも簡単に実装できるサンプルコードや応用例も豊富に紹介していますので、ぜひ参考にしてみてください。

●JavaScriptポップアップの基本

○ポップアップとは

ポップアップとは、ウェブページ上に表示される小さなウィンドウやダイアログボックスのことを指します。

これらは通常、ユーザーが特定の操作を実行した際に表示されることが多く、情報の提供や確認を求める目的で使用されます。

○JavaScriptでのポップアップ作成方法

JavaScriptを使ってポップアップを作成する方法はいくつかあります。

ここでは、基本的なアラートダイアログや確認ダイアログ、プロンプトダイアログなどの方法を紹介します。

●JavaScriptポップアップの方法10選

○サンプルコード1：アラートダイアログ

アラートダイアログは、簡単なメッセージを表示するために使用されます。このコードでは、ボタンをクリックするとアラートダイアログが表示されるようにしています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>アラートダイアログのサンプル</title>
  <script>
    function showAlert() {
      alert("こんにちは！");
    }
  </script>
</head>
<body>
  <button onclick="showAlert()">アラートを表示</button>
</body>
</html>

○サンプルコード2：確認ダイアログ

確認ダイアログは、ユーザーに選択肢を提示し、その選択に応じた処理を実行するために使用されます。

この例では、ボタンをクリックすると確認ダイアログが表示され、ユーザーが「OK」または「キャンセル」を選択できます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>確認ダイアログのサンプル</title>
  <script>
    function showConfirm() {
      if (confirm("OKを押すと進みます。キャンセルを押すと終了します。")) {
        alert("OKを選択しました。");
      } else {
        alert("キャンセルを選択しました。");
      }
    }
  </script>
</head>
<body>
  <button onclick="showConfirm()">確認ダイアログを表示</button>
</body>
</html>

○サンプルコード3：プロンプトダイアログ

プロンプトダイアログは、ユーザーからの入力を受け付けるために使用されます。

このコードでは、ボタンをクリックするとプロンプトダイアログが表示され、ユーザーがテキストを入力できるようになっています。

その後、入力されたテキストをアラートダイアログで表示します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>プロンプトダイアログのサンプル</title>
  <script>
    function showPrompt() {
      var inputText = prompt("お名前を入力してください：");
      if (inputText != null) {
        alert("こんにちは、" + inputText + "さん！");
      }
    }
  </script>
</head>
<body>
  <button onclick="showPrompt()">プロンプトダイアログを表示</button>
</body>
</html>

○サンプルコード4：カスタムポップアップ

カスタムポップアップは、デザインや機能を自由に設定できるポップアップです。

この例では、ボタンをクリックするとカスタムポップアップが表示されるようになっています。

また、ポップアップ内の「閉じる」ボタンを押すと、ポップアップが閉じます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>カスタムポップアップのサンプル</title>
  <style>
    .popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      border: 1px solid black;
      padding: 20px;
      z-index: 1000;
    }
    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }
  </style>
  <script>
    function showPopup() {
      document.querySelector(".overlay").style.display = "block";
      document.querySelector(".popup").style.display = "block";
    }

    function closePopup() {
      document.querySelector(".overlay").style.display = "none";
      document.querySelector(".popup").style.display = "none";
    }
  </script>
</head>
<body>
  <button onclick="showPopup()">カスタムポップアップを表示</button>
  <div class="overlay" onclick="closePopup()"></div>
  <div class="popup">
    <h2>カスタムポップアップ</h2>
    <p>これはカスタムポップアップのサンプルです。</p>
    <button onclick="closePopup()">閉じる</button>
  </div>
</body>
</html>

○サンプルコード5：モーダルウィンドウ

モーダルウィンドウは、バックグラウンドのコンテンツを非アクティブにしてユーザーの注意を集中させるためのポップアップです。

このコードでは、ボタンをクリックするとモーダルウィンドウが表示され、背景が暗くなります。

さらに、ウィンドウ内の「閉じる」ボタンを押すとモーダルウィンドウが閉じます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>モーダルウィンドウのサンプル</title>
  <style>
    .modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      border: 1px solid black;
      padding: 20px;
      z-index: 1000;
    }
    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }
  </style>
  <script>
    function showModal() {
      document.querySelector(".overlay").style.display = "block";
      document.querySelector(".modal").style.display = "block";
    }

    function closeModal() {
      document.querySelector(".overlay").style.display = "none";
      document.querySelector(".modal").style.display = "none";
    }
  </script>
</head>
<body>
  <button onclick="showModal()">モーダルウィンドウを表示</button>
  <div class="overlay" onclick="closeModal()"></div>
  <div class="modal">
    <h2>モーダルウィンドウ</h2>
    <p>これはモーダルウィンドウのサンプルです。</p>
    <button onclick="closeModal()">閉じる</button>
  </div>
</body>
</html>

○サンプルコード6：ツールチップ

ツールチップは、要素にマウスオーバーした際に追加情報を表示するためのポップアップです。

このコードでは、テキストにマウスオーバーすると、ツールチップが表示されるようになっています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ツールチップのサンプル</title>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
    }

    .tooltip:hover .tooltip-text {
      display: block;
    }

    .tooltip-text {
      display: none;
      position: absolute;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      background-color: black;
      color: white;
      padding: 5px;
      border-radius: 3px;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <p>以下のテキストにカーソルを合わせてください。</p>
  <div class="tooltip">ツールチップを表示するテキスト
    <span class="tooltip-text">これがツールチップの内容です。</span>
  </div>
</body>
</html>

○サンプルコード7：ポップオーバー

ポップオーバーは、要素をクリックした際に表示されるポップアップです。

このコードでは、ボタンをクリックすると、ポップオーバーが表示され、再度クリックすると非表示になります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ポップオーバーのサンプル</title>
  <style>
    .popover {
      position: relative;
      display: inline-block;
    }

    .popover-text {
      display: none;
      position: absolute;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      background-color: white;
      border: 1px solid black;
      padding: 5px;
      border-radius: 3px;
    }

    .popover.active .popover-text {
      display: block;
    }
  </style>
  <script>
    function togglePopover(element) {
      element.classList.toggle("active");
    }
  </script>
</head>
<body>
  <div class="popover" onclick="togglePopover(this)">
    <button>ポップオーバーを表示するボタン</button>
    <div class="popover-text">これがポップオーバーの内容です。</div>
  </div>
</body>
</html>

○サンプルコード8：タイマーを使ったポップアップ

このコードでは、一定時間が経過した後にポップアップを表示する方法を紹介しています。

この例では、ページが読み込まれてから5秒後にポップアップが表示されます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>タイマーを使ったポップアップのサンプル</title>
  <script>
    function showPopup() {
      alert("5秒経過しました。これがポップアップです。");
    }

    window.onload = function() {
      setTimeout(showPopup, 5000);
    };
  </script>
</head>
<body>
  <p>ページが読み込まれてから5秒後にポップアップが表示されます。</p>
</body>
</html>

○サンプルコード9：クリックイベントを使ったポップアップ

このコードでは、要素をクリックした際にポップアップを表示する方法を紹介しています。

この例では、ボタンをクリックするとポップアップが表示されます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>クリックイベントを使ったポップアップのサンプル</title>
  <script>
    function showPopup() {
      alert("ボタンがクリックされました。これがポップアップです。");
    }
  </script>
</head>
<body>
  <button onclick="showPopup()">ポップアップを表示するボタン</button>
</body>
</html>

○サンプルコード10：クッキーを使ったポップアップ制御

このコードでは、クッキーを使用してポップアップの表示を制御する方法を紹介しています。

この例では、ページが読み込まれた際に、クッキーが存在しなければポップアップが表示され、その後クッキーが設定されます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>クッキーを使ったポップアップ制御のサンプル</title>
  <script>
    function setCookie(name, value, days) {
      let expires = "";
      if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
      }
      document.cookie = name + "=" + value + expires + "; path=/";
    }

    function getCookie(name) {
      const value = "; " + document.cookie;
      const parts = value.split("; " + name + "=");
      if (parts.length === 2) return parts.pop().split(";").shift();
      return null;
    }

    window.onload = function() {
      const popupCookie = getCookie("popupShown");
      if (!popupCookie) {
        alert("初めての訪問です。これがポップアップです。");
        setCookie("popupShown", "true", 1);
      }
    };
  </script>
</head>
<body>
  <p>ページが読み込まれた際、クッキーが存在しなければポップアップが表示されます。</p>
</body>
</html>

●注意点と対処法

ポップアップはユーザーにとってうっとうしい場合があるため、表示回数やタイミングを適切に制御することが重要です。

また、ポップアップのデザインや内容もユーザーフレンドリーにすることが求められます。

●カスタマイズ方法

ポップアップのデザインや動作は、JavaScriptやCSSを活用してカスタマイズすることができます。

いくつかのカスタマイズ方法を紹介します。

モーダルウィンドウのデザイン変更：CSSを編集することで、モーダルウィンドウの背景色、枠線、フォントサイズ、ボタンのデザインなどを変更できます。
ポップアップの表示アニメーション：CSSのアニメーション機能やJavaScriptのアニメーションライブラリを使って、ポップアップが表示される際のアニメーションを追加できます。
例えば、フェードインやスライドインなどの効果が考えられます。
クリックイベントを使ったポップアップ表示：特定のボタンやリンクをクリックした際にポップアップが表示されるようにすることができます。
これには、JavaScriptでクリックイベントを検知し、ポップアップを表示する関数を実行するように設定します。
クッキーの有効期限を変更：サンプルコード10で紹介したように、クッキーを使ってポップアップの表示を制御する際に、クッキーの有効期限を変更することで、表示間隔を調整できます。

これらのカスタマイズ方法を組み合わせることで、ユーザーにとって使いやすく魅力的なポップアップを実現できます。