【サンプル1】window.open()を使用したポップアップウィンドウ		このサンプルでは、`window.open()`メソッドを使用して、新しいタブやウィンドウで外部のURLを表示するポップアップを実装しています。外部リンクを開いたり、別ウィンドウでフォームや情報を表示したいときに使います。ただし、ポップアップブロッカーにより自動で開かないことがあるので、ユーザーの操作と連動させることが一般的です。
【サンプル2】CSSとJavaScriptを使ったモーダルウィンドウ		このサンプルはCSSとJavaScriptを組み合わせて、ページ内に表示・非表示を切り替えられるモーダルウィンドウを実装しています。サインアップフォームや重要な情報の通知に適しており、ポップアップブロッカーの影響を受けないため、ユーザーインターフェースとしてよく利用されます。

上記で紹介した2つのサンプルコードについて、実際にどのように動作するかを確認するため、以下のCodePenの埋め込みを利用して、実装内容を見てみましょう。

window.open()メソッドを使用したポップアップウィンドウの作成

ポップアップウィンドウは`window.open()` メソッドを使用して新しいブラウザウィンドウやタブを開くことで作成できます。このメソッドは3つの引数を取り、それぞれURLやウィンドウ名、オプション（ウィンドウサイズや機能）を指定できます。

function openPopup() {
  window.open("https://example.com", "popupWindow", "width=400,height=300");
}

このコードは「https://example.com」というURLを持つ新しいウィンドウが幅400ピクセル、高さ300ピクセルで開かれます。ポップアップウィンドウは外部リンクや別ページの表示に便利ですが、ポップアップブロッカーに注意が必要です。ほとんどのブラウザではユーザーの操作なしにポップアップを開くことが制限されているため、ボタンクリックなどのユーザーアクションと連動させるのが一般的です。

CSSとJavaScriptを組み合わせたモーダルウィンドウの実装

モーダルウィンドウはページ内にオーバーレイで表示されるウィンドウです。JavaScriptとCSSを組み合わせることで、モーダルを表示・非表示にできます。この手法はブラウザのポップアップブロッカーの影響を受けにくく、デザインの自由度も高いため、ユーザーインターフェースとしてよく使用されます。

<!-- HTML -->
<div id="popup" class="popup">
  <div class="popup-content">
    <h2>モーダルウィンドウ</h2>
    <p>これはCSSとJavaScriptを組み合わせたモーダルウィンドウです。</p>
    <button onclick="closePopup()">閉じる</button>
  </div>
</div>

/* CSS */
.popup {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.popup-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

// JavaScript
function openPopup() {
  document.getElementById("popup").style.display = "block";
}

function closePopup() {
  document.getElementById("popup").style.display = "none";
}

このコードではHTMLでモーダルウィンドウの構造を定義し、CSSで非表示に設定しています。JavaScriptの関数でモーダルを表示・非表示に切り替えます。この方法は、アニメーションや複数のモーダルを管理する場合に適しており、より柔軟にカスタマイズ可能です。

おすすめのPython研修一覧

Python研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Python研修の一覧を見る

おすすめのDX研修一覧

DX研修を提供しているおすすめの企業・法人を一覧で掲載しております。

DX研修の一覧を見る

おすすめのJava研修一覧

Java研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Java研修の一覧を見る

おすすめのJavaScript研修一覧

JavaScript研修を提供しているおすすめの企業・法人を一覧で掲載しております。

JavaScript研修の一覧を見る

JavaScriptポップアップウィンドウとモーダルウィンドウの活用シーン

ポップアップウィンドウやモーダルウィンドウは、さまざまなシーンで活用できます。それぞれの利用例について説明します。

ユーザー登録フォームでの利用
画像ギャラリーでの拡大表示

ユーザー登録フォームでの利用

ユーザー登録フォームでは、モーダルウィンドウを利用することで、入力内容の確認や規約の確認を求めることができます。ユーザーが登録ボタンをクリックした際にポップアップを表示し、最終確認を行うことで、誤った登録を防ぐことが可能です。

function showConfirmation() {
  let popup = document.getElementById("confirmPopup");
  popup.style.display = "block";
  
  // フォームデータの取得と表示
  let name = document.getElementById("name").value;
  let email = document.getElementById("email").value;
  document.getElementById("confirmName").textContent = name;
  document.getElementById("confirmEmail").textContent = email;
}

function confirmRegistration() {
  // 登録処理
  alert("登録が完了しました！");
  closePopup();
}

function closePopup() {
  document.getElementById("confirmPopup").style.display = "none";
}

この実装では、ユーザーが入力した情報をモーダル内に表示して最終確認を行います。また、規約への同意や、重要事項の通知を行う場面でも活用できます。ユーザーの操作を一時的に制限し、確認を促すことで、意図しない操作を防ぐことができます。

画像ギャラリーでの拡大表示

画像ギャラリーでは、モーダルウィンドウを使用して画像を拡大表示する「ライトボックス」のような効果を実現できます。サムネイル画像をクリックすると、拡大表示された画像をポップアップウィンドウまたはモーダルウィンドウで表示します。

function openImagePopup(imageSrc) {
  let popup = document.getElementById("imagePopup");
  let popupImage = document.getElementById("popupImage");
  popupImage.src = imageSrc;
  popup.style.display = "flex";
}

function closeImagePopup() {
  document.getElementById("imagePopup").style.display = "none";
}

// HTML
<div id="imagePopup" class="popup" onclick="closeImagePopup()">
  <img id="popupImage" src=" alt="拡大画像">
</div>

<div class="gallery">
  <img src="thumbnail1.jpg" onclick="openImagePopup('large1.jpg')">
  <img src="thumbnail2.jpg" onclick="openImagePopup('large2.jpg')">
  <img src="thumbnail3.jpg" onclick="openImagePopup('large3.jpg')">
</div>

サムネイル画像をクリックすると、拡大表示された画像がモーダルで表示され、ページ遷移せずに画像の詳細を確認できます。この手法は、商品画像の表示やフォトギャラリーに適しており、ユーザーの体験を向上させます。

まとめ

ポップアップウィンドウとモーダルウィンドウは、それぞれ異なる用途で利用されます。ポップアップウィンドウは新しいタブやウィンドウで表示されるため、外部リンクや別ページを開く際に便利です。一方、モーダルウィンドウはページ内に表示され、特定の操作を完了するまでユーザーの操作を制限するのに適しています。どちらを使うべきかは、用途に応じて選択するのが最適です。

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