【丁寧な解説書】jsプラグインModaal　〜導入編〜

##はじめに

モーダル。押すとぽんって出てきて、背景が黒っぽくなるやつ。webデザインやってたら使いたいな！ってタイミング出てくると思うんです。
それ、簡単に導入出来ちゃう__jsプラグインmodaalの解説__しちゃうよ。

ちなみに、一応丁寧にこれだけ見たら導入できるように解説していきますが、__jQueryってなんぞや__って方はこちらを先に見ておくのがおすすめ。

* [jQueryの基礎知識](https://kumaweb-d.com/jquery/basics-of-jquery/)

#Modaalの導入手順
####1. modaalファイルのダウンロード

* まず、Github開いて
[Githubの公式サイトはこちら](https://github.com/humaan/Modaal/tree/68a5abc0ab74291becac88e758462ec39539697c)
* __Code__という緑ボタンを押し、
__Download ZIP__を押してファイルをダウンロード！！
<img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/937659/55f22677-7ce3-9251-aa8f-69557edac75c.png">

* zipファイルを解凍して以下のファイルを自分の作業しているフォルダ内に設置してください。
```modaal.css```　
```modaal.js```
> sorceフォルダかdistフォルダの中にあります。minファイルでも大丈夫ですが、cssはminじゃない方がおすすめです。

####2. ファイルの読み込み

```html:index.html
<head>
‥
<link rel="stylesheet" href="modaal.css" >
‥
</head>
<body>
‥
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="modaal.js"></script>
</body>
```

####3. modaal.jsを動かすコードを書きます
以下は全てHTMLに記述するときを前提として書いています。

__トリガー__

```html:
<a href="#modal_link" class="modal">OPEN</a>
```

__モーダルウィンドウ__

```html:
<div id="modal_link" style="display:none;">
   <p>モーダルで表示させたいもの</div>
</div>
```
__jQuery__

```html:
<script>$(".modal").modaal();</script>
```


####4. plus うまく行かなかった時に確認すべきこと！

> まず検証ツールを開いて「Console」タブをクリック
$ is not defined というエラーが出ていたらjQuery本体が読み込まれていない、もしくはjQuery本体を読み込む前にjQueryを書いてしまっているという意味です。 


* __jQueryのCDNを読み込んでる？__


```html:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
```
[jQueryのCDNはこちら](https://code.jquery.com/)
> こちらのjQuery Core 3.5.1 -minifiedをクリックしてぽんっと出てきたものをコピペしてくださいー！

* __jQueryの読み込み順序は合ってる？__

```html:
<!--　jQueryのCDN　-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- ダウンロードしたmodaal.jsファイルの設置　-->
<script src="modaal.js"></script>
<!-- jQueryが書いてあるファイル　-->
<script>$(".modal").modaal();</script>
```

* __jQueryを複数読み込んでない？__

初めましてjQueryって方にありがちなのが、__「jQueryたくさん読み込み問題。」__
jQueryのCDNは最新バージョンを１回読み込めば十分ですから、たくさん書いてたら消しましょ！

* __記入する位置は合ってる？__

cssはheadタグ内、script系はbodyの閉じタグの手前に書き込みましょう

#Modaalのカスタマイズ

カスタマイズに関しましてはこちらの記事をご覧ください
[【丁寧な解説書】jsプラグインModaal　〜カスタマイズ編〜](https://qiita.com/nukuri/items/89f496fe4d1520904fe0)

#Modaal導入での失敗経験
__埋め込んだyoutubeが中央配置にならない問題__
なぜか、モーダルで表示したYoutubeが画面の上に中央に配置されず、画面の上に寄ってしまうという事態が起きました。

__前提__
そもそもこちらの指定のおかげで中央配置になるはずなのですが、

```css:modaal.css
.modaal-inner-wrapper {
	display: table-cell;
	vertical-align: middle;
	}
```


__原因__
なぜかこちらが効いてしまって中央配置にならず、というかそもそもvertical-alignが効かなくなっていて、

```css:modaal.css
.modaal-fullscreen .modaal-inner-wrapper {
	display: block;
	vertical-align: top;
}
```

__解決方法__
検証ツールで色々探って、こうしたらうまくいきました

```css:modaal.css
.modaal-fullscreen .modaal-inner-wrapper {
        display: grid;
        vertical-align: middle;
}
```
学びとしては、やっぱ困ったら検証ツールを使えばなんとかわかる！ってことでした笑
一応、検証ツールの使い方の参考リンクはこちら
[初心者向け！Chromeの検証機能（デベロッパーツール）の使い方](https://saruwakakun.com/html-css/basic/chrome-dev-tool)


##最後に
出来るだけ丁寧にModaalについて説明しましたつもりですが、わからないことありましたら教えてくださーい！最後までご覧いただきありがとうございました！

##参考文献
*　[簡単にモーダルを実装するModaal.js(jsプラグイン)の使い方](https://mainichiweb.com/memo/js/585/)
*　[【jQuery】モーダルウィンドウ実装する超秀逸[Modaal]プラグインの使い方](https://on-ze.com/archives/6971)