モーダルとは
最初に、本記事で作成したいものの完成形を、画像で見ていきましょう。 ①最初の画面では、以下のようにボタンが１つだけある状態です。
②「画像を表示」ボタンをクリックすると以下のように画像が表示されます。
モーダルの構造
モーダルは、ボタンを押したときに、黒い背景、画像、閉じるボタンの３つの要素を表示し、閉じるボタンを押すと３つの要素が表示さなくなるような構造になっています。 このような動きは、javascriptでHTMLの要素を取得し、classを付けたり消したりすることで実装できます。コードの全体像
それではモーダル実装するために必要なコードの全体を見ていきましょう。 まずはHTMLです。index.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>modal</title>
<script src="https://kit.fontawesome.com/f08e8f441f.js " crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div id="modal" class="modal">
<div class="modal_inner">
<div id="modal_close" class="modal_close"><i class="fas fa-times"></i></div>
<img src="image001.jpg">
</div>
<div id="modal_background" class="modal_background"></div>
</div>
<button id="modal_show" class="button" >画像を表示</button>
<script src="main.js"></script>
</body>
</html>
次にCSSです。
app.css
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
opacity: 0;
visibility: hidden;
-webkit-transition: .6s;
transition: .6s;
}
.modal.is-show {
opacity: 1;
visibility: visible;
}
.modal_inner {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 80%;
max-width: 600px;
padding: 50px;
background-color: #fff;
z-index: 2;
}
.modal_inner img {
width: 100%;
}
.modal_close {
position: absolute;
right: 0;
top: 10px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.modal_close i {
font-size: 20px;
color: #333;
}
.modal_background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1;
cursor: pointer;
}
.button{
font-size: 20px;
}
最後にjavascriptです。
main.js
'use strict';
const modal = document.getElementById('modal');
const show = document.getElementById('modal_show');
const close = document.getElementById('modal_close');
const backGround = document.getElementById('modal_background');
show.addEventListener('click',() => {
modal.classList.add('is-show');
backGround.classList.add('is-show');
})
close.addEventListener('click',() => {
modal.classList.remove('is-show');
backGround.classList.remove('is-show');
})
backGround.addEventListener('click',() => {
close.click();
})
コードの解説
全体を確認していただいたので、次にコード内容を詳しく見ていきます。HTMLについて
HTMLは大きく２つに別れています。 ①表示される中身。 ②画像を表示するためのボタン。 モーダルの中身も２つに別れており、modal_innerの中に、「画像」と「閉じるボタン」のアイコンが入っています。アイコンはフォントオーサムのもの使っていますので、head部分で読み込みをしています。また、表示する画像については好きなものを使用してください。index.html
<!-- ① -->
<div id="modal" class="modal">
<div class="modal_inner">
<div id="modal_close" class="modal_close"><i class="fas fa-times"></i></div>
<!-- ↑閉じるボタンのアイコン -->
<img src="">
<!-- ↑表示する画像 -->
</div>
<div id="modal_background" class="modal_background"></div>
<!-- ↑背景 -->
</div>
<!-- ① -->
<button id="modal_show" class="button" >画像を表示</button>
javascriptについて
javascriptは大きく３つの部分に別れています。 ①HTMLから②③で、clickイベントを設定するためにDOM要素を取得し、定数として設定している。②modal_showのidを持つdivタグをクリックすると、is-showのclassをつけるようイベントを設定している。
③modal_closeのidを持つdivタグにクリックすると、②でつけたis-showのclassを消すようイベントを設定している。
main.js
//①
const modal = document.getElementById('modal');
const show = document.getElementById('modal_show');
const close = document.getElementById('modal_close');
const backGround = document.getElementById('modal_background');
//②
show.addEventListener('click',() => {
modal.classList.add('is-show');
backGround.classList.add('is-show');
})
//③
close.addEventListener('click',() => {
modal.classList.remove('is-show');
backGround.classList.remove('is-show');
})
cssについて
cssについては重要な箇所のみ解説します。①
以下の箇所ではmodalの表示する部分を装飾しています。
visibility: hidden;
として、普段はモーダルが見えないようにしています。
-webkit-transition: .6s;
transition: .6s; として、クリックされた時にすぐに画像が表示されるのではなく、０．６秒かけてゆっくり表示されるように設定しています。
app.css
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
opacity: 0;
visibility: hidden;
-webkit-transition: .6s;
transition: .6s;
}
②
以下の箇所では①で見えないようにしていた箇所を見えるようにするよう装飾しています。
visibility: visible; として、①で見えなくしていたモーダルの中身を見えるように上書きしています。
is-show のclassについてはjavascriptでイベントを設定し、クリックすることで追加あるいは削除できるようにしています。
app.css
.modal.is-show {
opacity: 1;
visibility: visible;
}
③
modal_backgroundのclassを持つ部分のz-index: 1; に、modal_innerのclassを持つ部分をz-index: 2; として、背景の上に画像が表示されるように設定しています。