15
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-04-22

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

0.はじめに

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

ApacheLicense2.0で商用利用可ですし(重要)

1.作り方

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

iziModal.js

スクリーンショット 2018-04-22 15.51.05.png

まず、これを使用するためには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>
スクリーンショット 2018-04-22 15.52.39.png

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

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

15
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?