＜初心者向け＞javascriptでモーダルを作ろう！


<h1>モーダルとは</h1>
　最初に、本記事で作成したいものの完成形を、画像で見ていきましょう。

　①最初の画面では、以下のようにボタンが１つだけある状態です。
<img width=400 height=200 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1127404/d19c4ac5-f473-cd4e-ee26-f9b362c744f7.png'>

②「画像を表示」ボタンをクリックすると以下のように画像が表示されます。
![スクリーンショット 2021-02-21 16.40.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1127404/2df3f0e2-7c83-e84a-a50d-c89f20381905.png)

<h3>モーダルの構造</h3>
　モーダルは、ボタンを押したときに、黒い背景、画像、閉じるボタンの３つの要素を表示し、閉じるボタンを押すと３つの要素が表示さなくなるような構造になっています。
　このような動きは、javascriptでHTMLの要素を取得し、classを付けたり消したりすることで実装できます。

<h1>コードの全体像</h1>
　それではモーダル実装するために必要なコードの全体を見ていきましょう。
 まずは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();
})

```

<h1>コードの解説</h1>
　全体を確認していただいたので、次にコード内容を詳しく見ていきます。

<h5>HTMLについて</h5>
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>
```


<h5>javascriptについて</h5>　
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');
})
```


<h4>cssについて</h4>
　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;　として、背景の上に画像が表示されるように設定しています。


<h6>最後に</h6>
　いかがでしょうか、説明は最低限となってしまいましたが、この記事を参考にして、ぜひモーダルを作ってみてください。