JavaScriptでモーダルウィンドウを実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでモーダルウィンドウを実装する方法について現役エンジニアが解説しています。モーダルウィンドウとは、指定したウィンドウ内での操作を完了もしくはキャンセル操作を行わないと他のウィンドウを開くことができないウィンドウのことです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでモーダルウィンドウを実装する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでモーダルウィンドウを実装する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

モーダルウィンドウとは

モーダルウィンドウとは、指定したウィンドウ内での操作を完了もしくはキャンセル操作を行わないと他のウィンドウを開くことができないウィンドウのことを指します。

表現方法が類似しているものとして「ポップアップ」がありますが、ポップアップの場合は他のウィンドウを操作することができる点がモーダルウィンドウと異なる点です。

モーダルウィンドウを使用する場面としては、エラーメッセージの表示やロード待機などを行わせる事ができます。

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

モーダルウィンドウの実装方法はメイン画面を表示した段階で、hiddenでモーダル画面を生成しておきます。ボタン等のイベントに応じて表示、非表示を切り替える手法を用います。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

一般的なモーダル表示の雛形を作ってみます。

HTML

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>モーダルウィンドウ設定</title>
<link rel="stylesheet" href="style.css"s>
</head>

<body>
<div id="open">
モーダルウィンドウを表示
</div>
<div id="mask" class="hidden"></div>
<section id="modal" class="hidden">
<p>モーダルウィンドウを表示しました。内容を確認して「閉じる」ボタンを押してください。</p>
<div id="close">
閉じる
</div>
</section>
<script src="script.js"></script>
</body>

 

CSS

body {
font-size: 16px;
}

#open,
#close {
cursor: pointer;
width: 200px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
padding: 12px;
margin: 20px auto 0;
background: gray;
color: white;
}

#mask {
background: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1;
}

#modal {
background: #fff;
color: #555;
width: 300px;
padding: 40px;
border-radius: 4px;
position: absolute;
top: 40px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 2;
transition: 0.4s;
}

#modal p {
margin: 0 0 20px;
}

#mask.hidden {
display: none;
}

#modal.hidden {
transform: translate(0, -500px);
}

 

JavaScript

'use strict';
{
const hiraku = document.getElementById('open');
const tojiru = document.getElementById('close');
const modal = document.getElementById('modal');
const kakusu = document.getElementById('mask');

hiraku.addEventListener('click', function () {
 modal.classList.remove('hidden');
 kakusu.classList.remove('hidden');
});
tojiru.addEventListener('click', function () {
 modal.classList.add('hidden');
 kakusu.classList.add('hidden');
});
kakusu.addEventListener('click', function () {
 modal.classList.add('hidden');
 kakusu.classList.add('hidden');
});
}

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。