【JavaScript】現役エンジニアが教える！モーダルウィンドウの実装方法！【初心者でもOK】

※本ページはプロモーションが含まれています。

本記事の内容

初心者向け

(3)

利用頻度

(4)

難易度

(4)

ハック君

編集長(・vv・) JavaScriptでモーダルウィンドウを実装したいんですが下記の内容が分かりません
教えて下さい(◎_◎) ﾝ?

・jQueryのプラグインって必要
・JavaScriptを使用してモーダルウィンドウを作成する手順
・HTMLとCSSをどういう風に組み合わせるのか

UIHACK 編集長

ハック君(^ ^)質問ありがとう♪

JavaScriptでモーダルウィンドウを実装する方法について解説するね(￣^￣)ゞﾗｼﾞｬ!!!

モーダルウィンドウは、ウェブサイトやアプリケーションのユーザーエクスペリエンスを向上させるために広く使われている便利な要素です。ユーザーがボタンをクリックすると、画面上に小さなポップアップウィンドウが表示されます。このモーダルウィンドウを使うことで、重要な情報を効果的に伝えたり、追加のコンテンツを提供したりすることができます。

この記事のポイント

・モーダルウィンドウとは？
・モーダルウィンドウの作り方とJavascriptの基本
・モーダルウィンドウを別のHTMLファイルで実装する方法

本記事では、モーダルウィンドウの基本的な実装方法から、さまざまな応用例まで幅広く解説します。JavaScriptを使用してモーダルウィンドウを作成する手順や、デザインやアニメーション効果を追加する方法についても詳しく説明します。

読む準備はできましたか？さあ、モーダルウィンドウの実装方法を学んで「未来の自分」に投資しよう！

モーダルウィンドウとは？画面上に表示された小さなポップアップウィンドウの事
モーダルウィンドウをJavascriptで実装する方法
1. JavaScriptでモーダルウィンドウのアニメーション効果を実装する方法
結論とまとめ

モーダルウィンドウとは？画面上に表示された小さなポップアップウィンドウの事

ハック君

モーダルウィンドウってそもそもどんなものでしょうか

UIHACK 編集長

解説

モーダルウィンドウとは、画面上に表示される小さなポップアップウィンドウのことを指します。一般的には、サイトやアプリケーション内で重要な情報やコンテンツをユーザーに表示するために使用されます。

背景のコンテンツを暗くするオーバーレイと呼ばれる透明なレイヤーと、その上に浮かび上がる小さなウィンドウで構成されます。通常、ウィンドウ内にはテキスト、画像、ボタン、フォームなどの要素が含まれており、ユーザーが重要な情報を確認したり、アクションを実行したりするためのインタフェースとなります。

メモ

モーダルウィンドウは、さまざまな場面で使用されます。例えば、重要なお知らせや警告メッセージの表示、詳細情報や追加オプションの提供、ユーザーからの入力や確認の求めなどがあります。モーダルウィンドウを使用することで、ユーザーエクスペリエンスを向上させ、重要な情報や機能を効果的に伝えることができます。

モーダルウィンドウをJavascriptで実装する方法

それでは先に、完成系のデモを確認して下さい。
「モーダルを開く」をクリックすると、ウィンドウが開く仕様になっています。

UIHACK 編集長

以下に、HTML、CSS、JavaScriptを使用してモーダルウィンドウを実装する例を示します。

HTML

  <button id="modalButton">モーダルを開く</button>
  <div id="modal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <h2>モーダルウィンドウのタイトル</h2>
      <p>モーダルウィンドウの内容や説明文</p>
    </div>
  </div>

UIHACK 編集長

解説

<button id=”modalButton”>モーダルを開く</button>：モーダルを開くためのボタンを定義しています。id属性を使用して、JavaScriptでボタンを取得します。

<div id=”modal” class=”modal”>：モーダルウィンドウのコンテンツを包む要素です。id属性を使用して、JavaScriptでモーダルウィンドウを制御します。

<span class=”close”>×</span> ：モーダルウィンドウの閉じるボタンを表す要素です。

CSS

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.close {
  color: #888;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
/*ボタンデザイン*/
button {
  align-items: center;
  background-image: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 18px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 140px;
  padding: 16px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s;
}
button:active,
button:hover {
  outline: 0;
}
button span {
  background-color: rgb(5, 6, 45);
  padding: 16px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;
}
button:hover span {
  background: none;
}
button:active {
  transform: scale(0.9);
}

UIHACK 編集長

解説

.modal: モーダルウィンドウのスタイルを指定するためのクラスです。

.modal-content: モーダルウィンドウのコンテンツ部分のスタイルを指定するためのクラスです。

.close: 閉じるボタンのスタイルを指定するためのクラスです。

button: ボタンのデザインを指定するためのセレクタです。

Javascriptの実装

const modalButton = document.getElementById("modalButton");
const modal = document.getElementById("modal");
const closeButton = document.getElementsByClassName("close")[0];
// モーダルを開く関数
function openModal() {
  modal.style.display = "block";
}
// モーダルを閉じる関数
function closeModal() {
  modal.style.display = "none";
}
// ボタンクリックでモーダルを開くイベントリスナーの設定
modalButton.addEventListener("click", openModal);
// 閉じるボタンクリックでモーダルを閉じるイベントリスナーの設定
closeButton.addEventListener("click", closeModal);

UIHACK 編集長

解説

const modalButton = document.getElementById(“modalButton”);: ボタン要素をid属性を使って取得します。

const modal = document.getElementById(“modal”);: モーダルウィンドウの要素をid属性を使って取得します。

const closeButton = document.getElementsByClassName(“close”)[0];: 閉じるボタン要素をclass属性を使って取得します。

function openModal() { … }: モーダルを開くための関数です。displayプロパティをblockに設定することで、モーダルが表示されます。

function closeModal() { … }: モーダルを閉じるための関数です。displayプロパティをnoneに設定することで、モーダルが非表示になります。

modalButton.addEventListener(“click”, openModal);: ボタンクリックイベントに対して、openModal関数を実行するイベントリスナーを設定します。

closeButton.addEventListener(“click”, closeModal);: 閉じるボタンクリックイベントに対して、closeModal関数を実行するイベントリスナーを設定します。

UIHACK 編集長

以上がHTML、CSS、JavaScriptのコードの概要です。これらのコードを組み合わせることで、ボタンをクリックしてモーダルウィンドウを表示させることができます。

JavaScriptでモーダルウィンドウのアニメーション効果を実装する方法

それでは先に、完成系のデモを確認して下さい。
「モーダルを開く」をクリックすると、開くさいに、モーダルがフェードインするアニメーション効果が適用されてます。

UIHACK 編集長

上記のアニメーション効果を実装する方法はいくつかありますが、以下に基本的な手順を示します。

HTML

<button id="modalButton">モーダルを開く</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>モーダルウィンドウのアニメーション効果</h2>
    <p>これにより、モーダルがスムーズに表示され、閉じるボタンをクリックするとモーダルがフェードアウトします。</p>
  </div>
</div>

UIHACK 編集長

解説

前の章（モーダルウィンドウをJavascriptで実装する方法）で、作成したHTMLと一緒です。テキストの内容のみ変更しています。

CSS

.fade-in {
  animation: fade 0.3s;
}

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

UIHACK 編集長

解説

前の章（モーダルウィンドウをJavascriptで実装する方法）で、作成したCSSとほぼ一緒です。
上記のCSSを追加して「アニメーション」効果を実装します。

.fade-in クラス:fade-in というクラスは、要素にアニメーション効果を追加するために使用されます。

animation プロパティ:アニメーションを要素に適用するためのプロパティです。この場合、fade というアニメーション名と、アニメーションの時間（0.3秒）を指定しています。

@keyframes ルール:アニメーションのキーフレームを定義するために使用されます。ここでは、fade というキーフレーム名を定義しています。

from ブロック:アニメーションの開始時の状態を指定します。ここでは、opacity プロパティを 0 に設定して要素を完全に透明にします。

to ブロック:アニメーションの終了時の状態を指定します。ここでは、opacity プロパティを 1 に設定して要素を完全に不透明にします。

Javascript

// モーダルを開くボタンとモーダル要素の取得
var modalButton = document.getElementById('modalButton');
var modal = document.getElementById('modal');

// モーダルを閉じるボタンの取得
var close = document.getElementsByClassName('close')[0];

// モーダルを開くボタンをクリックしたときの処理
modalButton.addEventListener('click', function() {
  modal.style.display = 'block';
  modal.classList.add('fade-in');
});

// モーダルを閉じるボタンをクリックしたときの処理
close.addEventListener('click', function() {
  modal.style.display = 'none';
  modal.classList.remove('fade-in');
});

UIHACK 編集長

解説

モーダルを開くボタンをクリックするとモーダルが表示され、モーダル内の閉じるボタンをクリックするとモーダルが非表示になるようになります。

結論とまとめ

この記事では、HTMLとCSSを使用して基本的なモーダルウィンドウの構造とスタイリングを作成する手順を解説しました。そして、JavaScriptを活用してモーダルウィンドウを制御する方法を紹介しました。JavaScriptを使えば、ボタンのクリックイベントやアニメーションの追加など、機能や効果を自由にカスタマイズできます。

Twitterも見てみる？

暇つぶしにどう