jQuery – iziModalで手軽にリッチなモーダルウィンドウを実装する

簡単な設定でリッチなアニメーションやカスタマイズが可能なモーダルウィンドウのjQueryプラグインiziModalをご紹介します。

デモ

See the Pen iziModal-sample by ponzu (@ponzu) on CodePen.

ファイルの準備

必要なファイルを読み込む

配布元のサイトからjsとcssデータをダウンロードして、html内で読み込みます。

iziModal

必要なファイルはダウンロードデータの以下に格納されています。(2016年9月現在)
iziModal-master
css
│└ iziModal.min.css
js
 └ iziModal.min.js

<link rel="stylesheet" href="iziModal.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="iziModal.min.js" type="text/javascript"></script>

デフォルトの使い方

default-modal

html

1行目はモーダルウィンドウを表示させるためのボタンです。
クリックした時のイベントを起こすためのクラス名open-defaultを指定します。
2〜7行目はモーダルウィンドウの中身です。
全体を囲うブロック要素にid modal-defaultを指定します。
3行目は、デフォルトのままでは表示されない閉じるボタンを入れています。

<button class="open-default button">default</button>
<div id="modal-default">
  <div class="close">
    <a data-izimodal-close="">×</a>
  </div>
  <p>このモーダルウィンドウはデフォルト設定です</p>
</div>

js

1行目でhtmlのモーダルウィンドウ表示ボタンに設定したクラス名open-defaultを指定します。
3,5行目でモーダルウィンドウの中身に設定したid modal-default を指定します。

$(document).on('click', '.open-default', function(event) {
  event.preventDefault();
  $('#modal-default').iziModal('open');
});
$('#modal-default').iziModal();

オプションを使用した使い方

option-modal
オプションを使用するとモーダルウィンドウのデザインやサイズを変更したり、タイトルの設定をすることが出来ます。

html

基本的な構造はデフォルトの使い方と同じです。
データ属性でタイトルやグループ名を指定しています。

<button class="open-options button">options</button>
<div id="modal-options" data-izimodal-group="group1" data-izimodal-loop="" data-izimodal-title="オプション設定モーダル" data-izimodal-subtitle="サブタイトル">
  <p>このモーダルはオプション設定をしています<br>iframeモーダルとグループ設定しています</p>
</div>

主なデータ属性

data-izimodal-group=”groupname” グループ名を指定する。同じグループ名が指定されたモーダルは、スライド表示できる。
data-izimodal-loop=”” グループのモーダル表示で、スライドさせた時にループさせる。値は空でOK。
data-izimodal-title=”タイトル” モダールのヘッダーに表示されるタイトル。
data-izimodal-subtitle=”サブタイトル” モダールのヘッダーに表示されるサブタイトル。

ご紹介しているのは一部です。詳細は配布元サイトからご確認ください。

js

1〜4行目はデフォルトの使い方と同じです。
6行目以降にオプションの値を指定しています。

$(document).on('click', '.open-options', function(event) {
  event.preventDefault();
  $('#modal-options').iziModal('open');
});
$('#modal-options').iziModal({
  headerColor: '#26A69A', //ヘッダー部分の色
  width: 400, //横幅
  overlayColor: 'rgba(0, 0, 0, 0.5)', //モーダルの背景色
  fullscreen: true, //全画面表示
  transitionIn: 'fadeInUp', //表示される時のアニメーション
  transitionOut: 'fadeOutDown' //非表示になる時のアニメーション
});
transitionInとtransitionOutで使えるアニメーションの種類 comingIn(デフォルト), comingOut(デフォルト), fadeOut, fadeIn, bounceInDown, bounceOutDown, bounceInUp, bounceOutUp, fadeInDown, fadeOutDown, fadeInUp, fadeOutUp, fadeInLeft, fadeOutLeft, fadeInRight, fadeOutRight, flipInX, flipOutX

ご紹介しているのは一部です。詳細は配布元サイトからご確認ください。

iframeを表示する使い方

iframe-modal

html

基本的な構造はデフォルトの使い方と同じです。
2行目のモーダルウィンドウのidを指定するdivは空でOKです。

<button class="open-iframe button">iframe</button>
<div id="modal-iframe"></div>

js

3行目のiziModal(‘open’,this); だけ他と違うので注意です。

$(document).on('click', '.open-iframe', function(event) {
  event.preventDefault();
  $('#modal-iframe').iziModal('open', this);
});
$('#modal-iframe').iziModal({
  width: 400, //横幅
  iframe: true, //iframeを利用
  iframeHeight: 300, //iframeの高さ
  iframeURL: 'http://gimmicklog.main.jp' //iframe内に表示するurl
});

アラート的な使い方

alert-modal

html

基本的な構造はデフォルトの使い方と同じです。
モーダルウィンドウの中身を空にして、タイトルとサブタイトルのみ指定しています。

<button class="open-alert button">alert</button>
<div id="modal-alert" data-izimodal-title="アラートモーダル" data-izimodal-subtitle="10秒で非表示になります"></div>

js

オプション設定でページを開いた時にモーダルウィンドウが5秒間表示させるよう設定しています。

$(document).on('click', '.open-alert', function (event) {
  event.preventDefault();
  $('#modal-alert').iziModal('open');
});
$('#modal-alert').iziModal({
  headerColor: '#d43838', //ヘッダー部分の色
  width: 400, //横幅
  autoOpen:true, //ページを開いた時に表示
  timeout: 5000, //5秒で非表示
  pauseOnHover: true, //マウスオーバーでカウントダウン停止
  timeoutProgressbar: true, //プログレスバーの表示
  attached: 'bottom' //アラートの表示位置 top or bottom or 指定なしで中央
});