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

iziModalの通知バー版はこちら
iziToastで超簡単に通知バーを作成 - Qiita

0.はじめに

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

ApacheLicense2.0で商用利用可ですし（重要）

1.作り方

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

iziModal.js

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

jQuery
GitHub - jquery/jquery-migrate: APIs and features removed from jQuery core

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

.
├── 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をこのような感じで作成します。

<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>

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

2.応用

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

リンクの場合

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

画像の場合

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

sample

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

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

<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>

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

<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

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

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

<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

表示位置を調整したい

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

<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