Help us understand the problem. What is going on with this article?

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした