今回はJavaScriptでモーダルウィンドウを作る方法についてまとめたいと思います。
こんなサンプルを作ってみました。
See the Pen by notebook (@orange-notebook) on CodePen.
「モーダルウィンドウを表示」ボタンを押すとモーダルウィンドウが表示されます。
モーダルウィンドウ内の「×」ボタン、もしくはモーダルウィンドウの外のオーバーレイをクリックするとモーダルウィンドウが閉じます。
またスクロールしてもモダールウィンドウの位置が画面の真ん中で固定されて表示されるようになっています。
まずモーダルウィンドウを作るためのポイントを簡単にまとめたいと思います。
- ボタンをクリックしたら、モーダルウィンドウとオーバーレイを表示する。
- モーダルウィンドウ内の×ボタンかオーバーレイをクリックしたら、モーダルウィンドウとオーバーレイを非表示にする。
- モーダルウィンドウの位置を固定する。(今回は画面の真ん中に固定。)
- オーバーレイを表示するときは、画面全体を覆うようにする。
今回はモーダルウィンドウとオーバーレイの表示の切り替えを
「activeクラス」の付け替えによって行いたいと思います。
またこちらの記事ではjQueryを使ったモーダルウィンドウの作り方をまとめています。
HTML
HTMLの全体はこんなかんじになっています。
<!-- クリックしたらモーダルを表示するボタン -->
<a href="#" class="btn">モーダルウィンドウを表示</a>
<!-- オーバーレイ -->
<div class="overlay"></div>
<!-- モーダルウィンドウ -->
<div class="modal">
<div class="close">×</div>
<h2>モダルのタイトル</h2>
<p>ここにモダルの内容が入ります。ここにモダルの内容が入ります。ここにモダルの内容が入ります。ここにモダルの内容が入ります。ここにモダルの内容が入ります。ここにモダルの内容が入ります。</p>
</div>
<!-- スクロールで高さを出すためのsectionタグ -->
<section></section>HTMLでは以下のパーツを作っていきます。
- クリックしてモーダルウィンドウを表示させるためのボタン
- モーダルウィンドウ本体
- モーダルウィンドウを消す×ボタン(モーダルウィンドウの中)
- オーバーレイ (黒い背景)
クリックしてモーダルウィンドウを表示させるためのボタン(.btn)、モダルが表示された時に一緒に表示させるオーバーレイ(.overlay)、モーダルウィンドウ(.modal)を並列の構造で作っています。
モーダルウィンドウとは関係ありませんが、画面をスクロールする高さを出すため、sectionタグを入れています。
そのため、スクロールしてもモーダルウィンドウが真ん中に固定表示されるようになっています。
CSS
CSSの全体像はこんなかんじになっています。
/* ボタンのデザイン */
.btn {
display: inline-block;
text-decoration: none;
padding: 10px 20px;
background: linear-gradient(to right bottom, #FFA500, #FF6347);
border-radius: 5px;
color: #fff;
margin: 20px;
transition: 0.3s;
}
.btn:hover {
opacity: .8;
}
/* オーバーレイ */
.overlay {
/* 位置を固定 */
position: fixed;
top: 0;
left: 0;
/* 画面いっぱいに広がるようにする */
width: 100%;
height: 100vh;
/* rgbaを使って60%の黒いオーバーレイにする */
background: rgba(0, 0, 0, 0.6);
/* デフォルトでは見えないようにする */
opacity: 0;
visibility: hidden;
/* 表示する際の変化の所要時間 */
transition: .3s;
}
/* activeクラスのついたオーバーレイ */
.overlay.active {
/* activeクラスがついたときにオーバーレイを表示する */
opacity: 1;
visibility: visible;
}
/* モーダルウィンドウ */
.modal {
max-width: 500px;
width: 86%;
padding: 15px 20px;
background: #fff;
/* 位置の調整(真ん中に表示) */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* デフォルトでは非表示にしておく */
opacity: 0;
visibility: hidden;
/* 表示の変化にかかる時間 */
transition: .3s;
}
/* activeクラスのついたモーダルウィンドウ */
.modal.active {
opacity: 1;
visibility: visible;
}
/* モーダルウィンドウ内の閉じるボタン */
.modal .close {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
font-size: 20px;
}
.modal h2 {
font-size: 18px;
font-weight: normal;
margin-bottom: 10px;
}
.modal p {
font-size: 13px;
}
/* スクロールできる高さを出すための設定 */
section {
height: 200vh;
}CSSでは主にモーダルウィンドウとオーバーレイのデザイン設定を行います。
また今回は「activeクラス」の切り替えで、モーダルウィンドウとオーバーレイの表示、非表示を制御します。
そのため「activeクラス」がついているときの表示設定、「activeクラス」がついていないときの非表示設定をしていきます。
モーダルウィンドウのCSS
モーダルウィンドウで必要なCSSのポイントは以下かなと思います。
- 表示されたとき、画面の真ん中に表示されるようにする。
- モーダルウィンドウ内の×ボタンの位置の調整。
- デフォルトではモーダルウィンドウを非表示にしておく。
- activeクラスがついたときにモーダルウィンドウを表示する。
1：画面の真ん中に表示されるようにする
モーダルウィンドウが画面の真ん中に表示されるようにします。
/* モーダルウィンドウ */
.modal {
/* 位置の調整(真ん中に表示) */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}「position: fixed;」で位置を固定し、
「top: 50%;」「left: 50%;」「transform: translate(-50%, -50%);」で
画面のど真ん中に表示されるようにします。
2：モーダルウィンドウ内の×ボタンの位置の調整
次にモーダルウィンドウ内にある×ボタンの位置を調整します。
/* モーダルウィンドウ内の閉じるボタン */
.modal .close {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
font-size: 20px;
}「position: absolute;」でpositionプロパティを指定している
モーダルウィンドウを基準に、×ボタンの位置を調整していきます。
3：デフォルトではモーダルウィンドウを非表示にしておく
またデフォルトではモーダルウィンドウを非表示にしておきます。
/* モーダルウィンドウ */
.modal {
/* デフォルトでは非表示にしておく */
opacity: 0;
visibility: hidden;
/* 表示の変化にかかる時間 */
transition: .3s;
}「opacity: 0;」と「visibility: hidden;」を使って非表示にしています。
4：activeクラスがついたときにモーダルウィンドウを表示する
クラスの付け替えで、モーダルウィンドウの表示非表示を切り替えを行います。
今回は「activeクラス」がついたときに、モーダルウィンドウを表示させます。
/* activeクラスのついたモーダルウィンドウ */
.modal.active {
opacity: 1;
visibility: visible;
}3で非表示にしていたモーダルウィンドウを
「opacity: 1;」「visibility: visible;」を使って表示するようにします。
オーバーレイのCSS
次にオーバーレイで必要なCSSのポイントは以下かと思います。
- モーダルウィンドウと同様、デフォルトでは非表示にする。
- 画面全体をおおうようにする。
- モーダルウィンドウと同様に、activeクラスがついたら表示する。
1：デフォルトでは非表示にする
モーダルウィンドウと同様、オーバーレイもデフォルトでは非表示にしておきます。
/* オーバーレイ */
.overlay {
/* デフォルトでは見えないようにする */
opacity: 0;
visibility: hidden;
}2：画面全体をおおうようにする
オーバーレイは、
「position: fixed;」「top: 0;」「left: 0;」「width: 100%;」「height: 100vh;」を使って、
位置を固定し、かつ画面全体に広がるようにします。
/* オーバーレイ */
.overlay {
/* 位置を固定 */
position: fixed;
top: 0;
left: 0;
/* 画面いっぱいに広がるようにする */
width: 100%;
height: 100vh;
/* rgbaを使って60%の黒いオーバーレイにする */
background: rgba(0, 0, 0, 0.6);
}3：activeクラスがついたら表示する
モーダルウィンドウと同様、
オーバレイも「activeクラス」がついたら表示されるようにします。
/* activeクラスのついたオーバーレイ */
.overlay.active {
/* activeクラスがついたときにオーバーレイを表示する */
opacity: 1;
visibility: visible;
}JavaScript
JavaScriptで必要になる実装の項目をまとめてみます。
- ボタン、モーダルウィンドウ、モーダルウィンドウの×ボタン、オーバーレイを変数に格納する。
- ボタンをクリックしたら、モーダルウィンドウとオーバーレイにactiveクラスをつけて、表示させる。
- モーダルウィンドウの×ボタンかオーバーレイをクリックしたら、モーダルウィンドウとオーバーレイのactiveクラスを外して非表示にする。
JavaScriptのコードの全体像はこんなかんじです。
// ボタン、モダル、モダルの閉じるボタン、オーバーレイを変数に格納
const btn = document.querySelector('.btn');
const modal = document.querySelector('.modal');
const closeBtn = document.querySelector('.close');
const overlay = document.querySelector('.overlay');
// ボタンをクリックしたら、モダルとオーバーレイに.activeを付ける
btn.addEventListener('click', function(e){
// aタグのデフォルトの機能を停止する
e.preventDefault();
// モーダルとオーバーレイにactiveクラスを付与する
modal.classList.add('active');
overlay.classList.add('active');
});
// モダルの閉じるボタンをクリックしたら、モダルとオーバーレイのactiveクラスを外す
closeBtn.addEventListener('click', function(){
modal.classList.remove('active');
overlay.classList.remove('active');
});
// オーバーレイをクリックしたら、モダルとオーバーレイのactiveクラスを外す
overlay.addEventListener('click', function() {
modal.classList.remove('active');
overlay.classList.remove('active');
});1：ボタン、モーダルウィンドウ、ウィンドウ内の✖️ボタン、オーバーレイを変数に格納
まずは、ボタン、モーダルウィンドウ、モーダルウィンドウ内の×ボタン、オーバーレイを変数に格納します。
// ボタン、モダル、モダルの閉じるボタン、オーバーレイを変数に格納
const btn = document.querySelector('.btn');
const modal = document.querySelector('.modal');
const closeBtn = document.querySelector('.close');
const overlay = document.querySelector('.overlay');JavaScriptからHTML要素を選択する方法は、
こちらの記事に簡単にではありますがまとめています。
2：ボタンをクリックしたら、モーダルウィンドウとオーバーレイにactiveクラスを付けて表示させる
ボタンをクリックしたら、
モーダルウィンドウとオーバーレイに「activeクラス」を付けて表示されるようにします。
// ボタンをクリックしたら、モダルとオーバーレイに.activeを付ける
btn.addEventListener('click', function(e){
// aタグのデフォルトの機能を停止する
e.preventDefault();
// モーダルとオーバーレイにactiveクラスを付与する
modal.classList.add('active');
overlay.classList.add('active');
});またボタンをクリックしたときに、
ボタンのaタグのデフォルトの機能を「e.preventDefault();」で解除しておきます。
JavaScriptからクラス名を操作する方法については、こちらの記事でまとめています。
3：モーダルウィンドウの×ボタンかオーバーレイをクリックしたら、ウィンドウとオーバーレイのactiveクラスを外して非表示にする
モーダルウィンドウの×ボタンか、モーダルウィンドウの外のオーバーレイをクリックしたら、モーダルウィンドウとオーバーレイの「activeクラス」を外して非表示になるようにします。
// モダルの閉じるボタンをクリックしたら、モダルとオーバーレイのactiveクラスを外す
closeBtn.addEventListener('click', function(){
modal.classList.remove('active');
overlay.classList.remove('active');
});
// オーバーレイをクリックしたら、モダルとオーバーレイのactiveクラスを外す
overlay.addEventListener('click', function() {
modal.classList.remove('active');
overlay.classList.remove('active');
});モーダルウィンドウの×ボタンをクリックしたときと、オーバーレイをクリックしたときの関数の中身は同じなので、別途関数を作成するとコードを短く書くことができます。
以上、JavaScriptで作るモーダルウィンドウの作り方でした。
最後までお読みいただき、ありがとうございました。
