JavaScriptでポップアップウィンドウを簡単に作成！7つのサンプルコードで完全解説

はじめに
●ポップアップウィンドウとは
- ○基本的なポップアップウィンドウの仕組み
●JavaScriptを使ったポップアップウィンドウの作成方法
●応用例とサンプルコード
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでポップアップウィンドウを簡単に作成できるようになります。

ポップアップウィンドウはウェブサイトでよく見かける機能ですが、意外と作成方法が分からない人も多いのではないでしょうか。

この記事では、JavaScriptを使ってポップアップウィンドウを作成する方法を、初心者にも分かりやすいように徹底解説します。

7つのサンプルコードを通して、基本的な使い方から応用例まで学べる内容になっています。

●ポップアップウィンドウとは

ポップアップウィンドウとは、ウェブページ上に新しい小さなウィンドウが表示される機能のことです。

通常、ユーザーが何らかのアクションを行った際に表示され、情報の提供や確認を目的として使われます。

○基本的なポップアップウィンドウの仕組み

ポップアップウィンドウは、通常JavaScriptを使用して実装されます。

JavaScriptにはウィンドウを操作するためのAPIが用意されており、それを利用することで簡単にポップアップウィンドウを作成できます。

●JavaScriptを使ったポップアップウィンドウの作成方法

ここでは、JavaScriptを使ってポップアップウィンドウを作成する方法を、4つのサンプルコードで解説していきます。

○サンプルコード1：基本的なポップアップウィンドウの作成

このコードでは、window.open()を使って基本的なポップアップウィンドウを作成しています。この例では、ボタンをクリックすると指定したURLが新しいウィンドウで開かれます。

// HTML
<button onclick="openPopup()">ポップアップを開く</button>

// JavaScript
function openPopup() {
  window.open("https://example.com");
}

○サンプルコード2：クリックイベントでポップアップウィンドウを表示

このコードでは、HTML要素にクリックイベントを設定し、クリック時にポップアップウィンドウが表示されるようにしています。

この例では、画像をクリックすると画像の詳細ページがポップアップウィンドウで開かれます。

// HTML
<img src="sample.jpg" alt="サンプル画像" onclick="openPopup('https://example.com/detail')">

// JavaScript
function openPopup(url) {
  window.open(url, '_blank', 'width=800, height=600');
}

○サンプルコード3：タイマーを使ったポップアップウィンドウの表示

このコードでは、タイマー機能を使って一定時間後にポップアップウィンドウを表示する方法を紹介しています。

この例では、ページが読み込まれてから5秒後にポップアップウィンドウが開かれます。

// JavaScript
window.addEventListener('load', function() {
  setTimeout(function() {
    window.open('https://example.com', '_blank', 'width=800, height=600');
  }, 5000);
});

○サンプルコード4：フォーム入力内容確認のポップアップウィンドウ

このコードでは、フォームの入力内容を確認するためのポップアップウィンドウを作成しています。

この例では、ユーザーが入力した情報をポップアップウィンドウで表示し、確認後にフォームを送信できるようにしています。

<!-- HTML -->
<form onsubmit="return openPopup()">
  <input type="text" name="username" id="username" placeholder="ユーザー名">
  <input type="submit" value="確認">
</form>

<!-- JavaScript -->
<script>
function openPopup() {
  var username = document.getElementById('username').value;
  var confirmWindow = window.open('', '_blank', 'width=300, height=200');
  confirmWindow.document.write('ユーザー名: ' + username + '<br>');
  confirmWindow.document.write('<button onclick="window.opener.document.forms[0].submit(); window.close();">送信</button>');
  return false;
}
</script>

●応用例とサンプルコード

次に、ポップアップウィンドウの応用例を3つのサンプルコードで紹介します。

○サンプルコード5：モーダルウィンドウ風のデザインでポップアップ表示

このコードでは、CSSを用いてモーダルウィンドウ風のデザインでポップアップウィンドウを表示する方法を紹介しています。

この例では、ボタンをクリックするとモーダルウィンドウが表示され、背景をクリックすると閉じるようになっています。

<!-- HTML -->
<button id="openModal">モーダルを開く</button>
<div id="modal" class="modal">
  <div class="modal-content">
    <p>モーダルウィンドウ風のポップアップです。</p>
  </div>
</div>

<!-- CSS -->
<style>
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
</style>

<!-- JavaScript -->
<script>
document.getElementById('openModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'block';
});

document.getElementById('modal').addEventListener('click', function() {
  this.style.display = 'none';
});
</script>

○サンプルコード6：Cookieを利用したポップアップウィンドウの制御

このコードでは、Cookieを利用してポップアップウィンドウの表示制御を行う方法を紹介しています。

この例では、初回アクセス時にのみポップアップウィンドウが表示され、再度アクセスしても表示されないようになっています。

// JavaScript
window.addEventListener('load', function() {
  if (!getCookie('visited')) {
    window.open('https://example.com', '_blank', 'width=800, height=600');
    setCookie('visited', 'true', 1);
  }
});

function setCookie(name, value, days) {
  var expires = '';
  if (days) {
    var 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) {
  var nameEQ = name + '=';
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

○サンプルコード7：複数のポップアップウィンドウを連続表示

このコードでは、複数のポップアップウィンドウを連続して表示する方法を紹介しています。

この例では、ボタンをクリックすることで、3つの異なるポップアップウィンドウが順番に表示されます。

<!-- HTML -->
<button id="openMultiplePopups">複数のポップアップを開く</button>

<!-- JavaScript -->
<script>
document.getElementById('openMultiplePopups').addEventListener('click', function() {
  // ポップアップウィンドウのURL
  var urls = [
    'https://example.com/1',
    'https://example.com/2',
    'https://example.com/3'
  ];

  // ポップアップウィンドウを順番に表示する
  urls.forEach(function(url, index) {
    setTimeout(function() {
      window.open(url, '_blank', 'width=800, height=600');
    }, index * 1000);
  });
});
</script>