jsプラグイン「iziModal」で超簡単にモーダルウィンドウを表示

iziModalの通知バー版はこちら
[iziToastで超簡単に通知バーを作成 - Qiita](https://qiita.com/wyokobe/items/444083086acbcfabd1ff)

## 0.はじめに

「ねえ、ちょっとモーダルウィンドウ作ってみてよJavaScriptで」
そんなこと言われて「え？」となった経験はありませんか？
「ほら、あのサイト行ったら最初に出てくるでしょ。あんな感じで作ってくれない？」
「は、はあ…」
といった感じで作り始めるわけですが、
「そもそもJavaScriptよくわからんし、どうすりゃいいんだ…」
となった時に、iziModalを使えばその悩みを解決できるかもしれません。

[ApacheLicense2.0](https://github.com/dolce/iziModal/blob/master/LICENSE)で商用利用可ですし（重要）

## 1.作り方

iziModalを使うことでおしゃれで軽量なモーダルウィンドウを超簡単に作成することができます。
下記サイトの「Download」から、jsとcssを入手します。

[iziModal.js](http://izimodal.marcelodolza.com/)

<img width="650" alt="スクリーンショット 2018-04-22 15.51.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/187135/d70644f7-6bbf-89be-3d45-dbb8192a3d89.png">

まず、これを使用するためにはjQueryとjquery-migrateが必要です。
下記サイトからそれぞれjsファイルをダウンロードしてきます。

[jQuery](https://jquery.com/)
[GitHub - jquery/jquery-migrate: APIs and features removed from jQuery core](https://github.com/jquery/jquery-migrate)

適当なディレクトリを準備してください。
それぞれのファイルを以下のような構成で配置します。

``` bash
.
├── css
│   ├── iziModal.css
│   └── iziModal.min.css
├── index.html
└── js
    ├── iziModal.js
    ├── iziModal.min.js
    ├── jquery-3.3.1.js
    ├── jquery-3.3.1.min.js
    ├── jquery-3.3.1.min.map
    ├── jquery-migrate-3.0.1.js
    └── jquery-migrate-3.0.1.min.js
```

index.htmlをこのような感じで作成します。

```html
<link rel="stylesheet" type="text/css" href="./css/iziModal.css" media="screen" />
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="./js/jquery-migrate-3.0.1.js"></script>
<script type="text/javascript" src="./js/iziModal.js"></script>
<script type="text/javascript">
  $(function() {
    $(".iziModal").iziModal();
  })
</script>

<button data-izimodal-open=".iziModal">ボタン</button>

<div class="iziModal" data-izimodal-title="タイトル" data-izimodal-subtitle="サブタイトル">
  <p>コンテンツ</p>
</div>
```

<img width="682" alt="スクリーンショット 2018-04-22 15.52.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/187135/270b43bd-3378-c821-4938-050c5531d94a.png">


たったこれだけでモーダルウィンドウを作成することができました。

## 2.応用

### 画像やリンクの遷移先としてモーダルウィンドウを出したい

リンクの場合

```html
<a href="#" data-izimodal-open=".iziModal">リンク</a>
```

画像の場合

```html
<img src="img/hogehoge.jpg" data-izimodal-open=".iziModal"/>
```

[sample](https://wyokobe.github.io/iziModal-demo/01.html)

### 複数のモーダルをグループ表示させたい

groupオプションで複数のモーダルをグループ化できます。
グループ化することで、モーダルの左右に＜＞ボタンが出現しモーダルを遷移させることができます。
loopオプションで最後尾に到達したら、最前列にループするようになります。

```html
<script type="text/javascript">
  $(function() {
    $(".iziModal_group").iziModal({
      group: "group01",
      loop: true,
    });
  })
</script>

<button data-izimodal-open=".iziModal_group">ボタン</button>

<div class="iziModal_group">
  <p>コンテンツ1</p>
</div>
<div class="iziModal_group">
  <p>コンテンツ2</p>
</div>
```

またオプションはこのように、タグの方にも設定可能です。
どちらも全く同じ設定になります。

```html
<script type="text/javascript">
  $(function() {
    $(".iziModal_group").iziModal();
  })
</script>

<button data-izimodal-open=".iziModal_group">ボタン</button>

<div class="iziModal_group" data-izimodal-group="group01" data-izimodal-loop=true>
  <p>コンテンツ1</p>
</div>
<div class="iziModal_group" data-izimodal-group="group01" data-izimodal-loop=true>
  <p>コンテンツ2</p>
</div>
```

[sample](https://wyokobe.github.io/iziModal-demo/02.html)

### iframeを使ってモーダルウィンドウでYouTubeやニコ動を再生したい

iframeオプションを有効にすることで、別ページの内容を展開することが可能です。
fullscreenオプションを有効にすることで、ヘッダーにフルスクリーンボタンが出現します。
iframeURLオプションにYouTubeとニコ動のURLを埋め込んで再生できるようにしました。

```html
<script type="text/javascript">
  $(function() {
    $(".iziModal_iframe").iziModal({
      iframe: true,
      fullscreen: true,
      group: "group01",
      loop: true,
      title: ".iziModal_iframe",
    });
  })
</script>

<button data-izimodal-open=".iziModal_iframe">ボタン</button>

<div class="iziModal_iframe" data-izimodal-iframeURL="https://www.youtube.com/embed/${VIDEO_ID}"></div>
<div class="iziModal_iframe" data-izimodal-iframeURL="https://embed.nicovideo.jp/watch/${VIDEO_ID}"></div>
```

[sample](https://wyokobe.github.io/iziModal-demo/03.html)

### 表示位置を調整したい

styleを使うことで表示位置を調整できます。
transitionInオプションとtransitionOutオプションでモーダルの出現方法の変更が可能です。

```html
<script type="text/javascript">
  $(function() {
    $(".iziModal1").iziModal({
      title:".iziModal1",
      transitionIn:"fadeInLeft",
      transitionOut:"fadeOutDown",
    });
    $(".iziModal2").iziModal({
      title:".iziModal2",
      transitionIn:"fadeInDown",
      transitionOut:"fadeOutLeft",
    });
    $(".iziModal3").iziModal({
      title:".iziModal3",
      transitionIn:"fadeInRight",
      transitionOut:"fadeOutUp",
    });
    $(".iziModal4").iziModal({
      title:".iziModal4",
      transitionIn:"fadeInUp",
      transitionOut:"fadeOutRight",
    });
  })
</script>

<button data-izimodal-open=".iziModal1">ボタン</button>

<div class="iziModal1" style="margin-right: 0px; margin-top: 0px;" data-izimodal-open=".iziModal2">
  <p>コンテンツ</p>
</div>
<div class="iziModal2" style="margin-right: 0px; margin-bottom: 0px;" data-izimodal-open=".iziModal3">
  <p>コンテンツ</p>
</div>
<div class="iziModal3" style="margin-left: 0px; margin-bottom: 0px;" data-izimodal-open=".iziModal4">
  <p>コンテンツ</p>
</div>
<div class="iziModal4" style="margin-left: 0px; margin-top: 0px;" data-izimodal-open=".iziModal1">
  <p>コンテンツ</p>
</div>
```

[sample](https://wyokobe.github.io/iziModal-demo/04.html)