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

初心者向けJavaScriptポップアップ作成方法JS
この記事は約17分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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を活用してカスタマイズすることができます。

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

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

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

まとめ

この記事では、ポップアップやモーダルウィンドウ、ツールチップ、ポップオーバーなどの実装方法や、クッキーを使ったポップアップ制御の方法をサンプルコードとともに紹介しました。

また、カスタマイズ方法についても触れました。これらの技術を活用することで、ウェブサイトのユーザビリティを向上させることができます。

適切なデザインや表示タイミングに注意して、ユーザーにとって有益な情報を提供できるポップアップを作成しましょう。