jQuery『iziModal』で自由度の高いモーダルウインドウを実装。設定方法とオプション解説 | uzurea.net

jQuery『iziModal』で自由度の高いモーダルウインドウを実装。設定方法とオプション解説

執筆: Eazy-T アイコン Eazy-T

この記事をSNSでシェア

webサイトでトリガーとなるボタンなどをクリックするとウィンドウが浮かび上がる『モーダル ウィンドウ (Modal window)』機能。

年齢制限やシステムのアラート、用語解説、外部サイトの動画表示や画像読込など、さまざまなシーンに利用できるこのモーダルウィンドウですが、設定の簡単さとオプションの充実度、さらにお手軽に格好良いアニメーションが実装できる点からお勧めしたいのが今回解説するjQueryプラグイン『iziModal』※です。
※おそらく『イージー・モーダル』と読むのだと思います。

今回はこの設置手順とサンプルを交えた使い方、そして各種オプションの詳細を動作デモを交えて解説していこうと思います。

スポンサーリンク

『iziModal』の主な機能と特徴

まずはiziModalの主な機能と特徴をピックアップしていきましょう。

  • 設置が簡単
  • レスポンシブ対応
  • ニュル!っと格好いいアニメーション
  • 軽快なファイルサイズと挙動
  • 豊富なカスタマイズオプション
  • ifram対応
  • アラート表示(設定した時間で非表示、と言うのも可能)
  • 長いコンテンツにも対応
  • グルーピング機能も対応

基本的な機能はもちろんですが、アニメージョンやウィンドウのヘッダー部分をオプションで容易に作成できるお手軽さで、是非とも一度設置してみたくなるモーダルウィンドウだと思いませんか?

『iziModal』の基本的な設置手順と解説

それでは、iziModalの設置方法を順を追って解説していきましょう。

まずはオフィシャルサイトからダウンロードとデータ展開

まずは『iziModal』のオフィシャルサイトからデータ一式をダウンロードします。

ボタンが小さくて見落としてしまいそうですが、ページ上部SNS関係のボタンに紛れている『Download』をクリック
ボタンが小さくて見落としてしまいそうですが、ページ上部SNS関係のボタンに紛れている『Download』をクリック

ダウンロードしたzipファイルを解凍し、その中に格納されているファイルを使用します。

zipアーカイブ。余談ですが当編集部ではWinRARを使ってます
Zipアーカイブの内容

アーカイブ中の「iziModal.css」「iziModal.min.js」の2つがあれば最低限iziModalを動作させることができます。

まずは必要最低限の記述で『iziModal』を動作させる

動作に必要なHTMLの記述は下記の通りです。 まずはhead要素内で……

  • jQuery本体
  • iziModalのjsファイル
  • iziModalのcss
  • iziModalのテーマcss

をhead要素内で読み込みます。

<script type="text/javascript" src="./js/jquery-3.2.1.min.js">
</script> <script type="text/javascript" src="./js/jquery-migrate-3.0.0.min.js"></script>
<script type="text/javascript" src="./js/iziModal.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/iziModal.css" media="screen" />

※パスは適宜変更してください。

続いてトリガーとなるボタンや、リンクを記述し、そこをクリック(orタップ)したときに表示させたいコンテンツを記述していきます。

<button data-iziModal-open=".iziModal">クリックするとウィンドウが表示されます</button>
<div class="iziModal" data-izimodal-title="ヘッダー部分のタイトル (無くても動作します)" data-izimodal-subtitle="ヘッダータイトルの下部に表示される説明文(無くても動作します)">
<p>ここにコンテンツを記述していきます。</p>
<!-- / .iziModal --></div>

最後に同じく設定をjQueryのお約束に則って記述していきます。最低限の記述は下記だけでOKです。
※セレクタは前述のhtmlで付与したクラス(またはID)を指定します。

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

ひとまず、以上でOK。
ボタンをクリックすると、Modalウィンドウが浮かび上がります。

シンプルな基本設定で動作する『iziModal』デモはこちら

にゅるにゅる!っと控えめなアニメーションも心地よいです。

なお、iziModalは、ボタン側で指定したセレクタ(data-iziModal-open=””)と、モーダル表示させたい要素のセレクタ名が一致していれば動作します。

※デモでは「button」を使用していますが、a要素などトリガーとなる要素は何でも大丈夫です。

複数ウィンドウをグループ化する『iziModal』

続いては複数の内容をグループ化して表示するタイプの設定をしてみましょう。

$(function(){
$(".iziModal").iziModal({
	group: "group01",
	loop: true,
	headerColor: "#91b500",
});
})

groupオプションは必須ですが、その値“group01”は任意の名称で設定してください。
loopオプションも必須ではありませんが、trueを設定する事で最後のスライドの次は最初のスライドへ……と、無限ループしてくれます。おまけとして、今回はModalウィンドのヘッダーの色を変えるheaderColorオプションを記述してみましょう。

あとはセレクタをクラスで指定した要素を複数用意すればOKです。

<div class="iziModal" data-izimodal-title="グループの1つ目のコンテンツです" data-izimodal-subtitle="直立。※ヘッダータイトル下部説明文">
<p style="text-align:center;padding:10px;">ここにコンテンツを記述していきます。<br>
画像を配置してみましょう。</p>
<figure style="text-align:center;"><img src="./img/uzurea_icon01.gif" alt="uzurea icon" width="400" height="400" /></figure>
<!-- / .iziModal --></div>

<div class="iziModal" data-izimodal-title="グループの2つ目のコンテンツです" data-izimodal-subtitle="戦闘力が高まる。※ヘッダータイトル下部説明文">
<p style="text-align:center;padding:10px;">ここにコンテンツを記述していきます。<br>
画像2</p>
<figure style="text-align:center;"><img src="./img/uzurea_icon02.gif" alt="uzurea icon" width="400" height="400" /></figure>
<!-- / .iziModal --></div>

<div class="iziModal" data-izimodal-title="グループの3つ目のコンテンツです" data-izimodal-subtitle="だらける。※ヘッダータイトル下部説明文">
<p style="text-align:center;padding:10px;">ここにコンテンツを記述していきます。<br>
画像3</p>
<figure style="text-align:center;"><img src="./img/uzurea_icon03.gif" alt="uzurea icon" width="400" height="400" /></figure>
<!-- / .iziModal --></div>

画像やインラインスタイルなどの設定も動作可否には影響しませんので自由度が高いですね。

複数ウィンドウをグループ化する『iziModal』のデモはこちら

iframeで外部コンテンツを読み込む『iziModal』設定

Youtubeや独立したページなどをiframeで表示させることもできます。

<script type="text/javascript">
$(".iziModal").iziModal({
	iframe : true,
	fullscreen: true,
	headerColor: "#000",
	background: "#ffe400",
	transitionIn: "bounceInDown",
	transitionOut: "bounceOutDown"
});
</script>

設定オプションではiframetrueに、モーダル領域の最大化を許可するオプションfullscreenも追加してみましょう。

おまけとして、headerColorの他、モーダル領域の背景色を変更するbackground、モーダル表示時のアニメーション設定transitionInとモーダルClose時のtransitionOutも設定します。
各値については本記事下部にて、表にしていますのでそちらをご確認ください。

続いてhtmlの記述を……

<div class="iziModal" 
data-izimodal-title="ヘッダー部分のタイトル (無くても動作します)" 
data-izimodal-subtitle="ヘッダータイトルの下部に表示される説明文(無くても動作します)" 
data-izimodal-iframeURL="https://www.youtube.com/embed/P4Gtly09mQo">
<!-- / .iziModal --></div>

htmlを表示させるウィンドウ要素の属性「data-izimodal-iframeURL」にモーダル内にiframeで表示させたいコンテンツのアドレスを記載します。

iframeの『iziModal』デモはこちら

その他オプションの一覧を掲載

デモを見ていただくと分かるように、特殊な独自カスタマイズをせずとも、痒い所に手が届くカスタマイズが可能なのが『iziModal』です。

以下に、公式オプションの一覧を掲載いたしますので、公式ドキュメントと併せてご確認ください。

豊富なオプションに加え、テーマやスタイルシートもカスタマイズする事でさらに表現方法は広がります。ぜひ色々お試しください。

オプション名初期値概要
titleヘッダーの見出し
subtitleヘッダーの見出しの説明文
headerColor‘#88A0B9’ヘッダーの背景色を指定
backgroundnullモーダルウィンドウの背景色を指定
theme空白か「light」から選択
iconnullヘッダーのアイコンフォントのクラス名
iconTextnullヘッダーの文字を含むアイコンフォントのクラス名
iconColorアイコンの文字色指定
rtlfalseRight to Left 通常htmlの記述順で左から右へと表示されるが、右から左へと変更する。
width600固定幅。
%・px・em・cmが使用可能。単位なしでpxに
topnull上の余白
bottomnull下の余白
borderBottomtrue下部に線を表示させるか否か
padding0モーダルウィンドウの内側の余白
radius3角丸の半径
zindex999重なり順
iframefalsetrueの場合、モーダル内でiframeが使用される
iframeHeight400iframeの高さ
iframeURLnullモーダル内のiframeで開かれるURL
focusInputtruetrueにすると、モーダルを開くたびに最初の可視フィールドがactiveになる
group同じグループ名でグループを作成するとスライドできる
loopfalse同じグループのスライドをループ可能にするか否か
navigateCaptiontrueスライドの矢印を表示するか否か
navigateArrowstrue矢印の位置変更。
「closeToModal」か「closeScreenEdge」
を選択
historyfalseハッシュで閲覧履歴を有効にする
restoreDefaultContentfalseモーダルをデフォルトにリセットしてもう一度開く
autoOpen0trueの場合、自動的に開く。数値の場合ミリ秒単位で遅延指定
bodyOverflowfalseモーダルを開くときにドキュメントに隠されたオーバーフローを強制し、モーダルを閉じると、オーバーフローが復元される
fullscreenfalseヘッダー部分にフルサイズに拡大するボタンを表示する
openFullscreenfalseフルスクリーンで開く
closeOnEscapetruetrueの場合「Esc」キーで閉じる
closeButtontrueヘッダーの閉じるボタンを表示する
appendTo‘body’モーダルウィンドウの配置場所
appendToOverlay‘body’モーダルウィンドウのオーバーレイの配置場所
overlaytrue背景オーバーレイの有無
overlayClosetruetrueの場合背景のオーバーレイ部分をクリックすると閉じる
overlayColor‘rgba(0, 0, 0, 0.4)’背景オーバーレイの色指定
timeoutfalseモーダルウィンドウが閉じられるまでの時間をミリ秒単位で指定
timeoutProgressbarfalseタイムアウトの進行状況バーを表示する
pauseOnHoverfalseマウスカーソルがモーダルをホバーすると進行状況バーを一時停止する
timeoutProgressbarColor‘rgba(255,255,255,0.5)’タイムアウトの進行状況バーの色
transitionIn‘comingIn’開くときのアニメーションを以下から選択
「comingIn」
「bounceInDown」
「bounceInUp」
「fadeInDown」
「fadeInUp」
「fadeInLeft」
「fadeInRight」
「flipInX」
transitionOut‘comingOut’閉じるときのアニメーションを以下から選択
「comingOut」
「bounceOutDown」
「bounceOutUp」
「fadeOutDown」
「fadeOutUp」
「fadeOutLeft」
「fadeOutRight」
「flipOutX」
transitionInOverlay‘fadeIn’背景オーバーレイ表示時のアニメーション
「fadeIn」
transitionOutOverlay‘fadeOut’背景オーバーレイ非表示時のアニメーション
「fadeOut」
onFullscreenfunction(){}モーダルがフルスクリーンを有効または無効にするときに実行されるコールバック関数
onResizefunction(){}サイズ変更が発生したときに実行されるコールバック関数
onOpeningfunction(){}モーダルを開くときに実行されるコールバック関数
onOpenedfunction(){}モーダルが開いているときに実行されるコールバック関数
onClosingfunction(){}モーダルを閉じるときに実行されるコールバック関数
onClosedfunction(){}モーダルが閉じられたときに実行されるコールバック関数
afterRenderfunction(){}モーダル構造の準備ができたときに実行されるコールバック関数

まとめと、ライセンスについて

今回はiziModalの設定方法とオプションについて解説いたしましたが、如何でしたでしょうか。中々便利そうですよね。

iziModalのライセンスは使用や頒布、修正、派生版の頒布、ライセンスの継承に関して制限がないApache License 2.0

さらに商用利用でも無料ですので、その点も安心です。

当記事が日々悩めるweb制作者の皆様のお力になれば幸いです。また、設置に関してや、オプション関連でご不明な点があれば、当ページコメント欄でもお気軽にご相談ください。

※2019年6月中旬、『iziModal』が公開されていたオフィシャルサイト『http://izimodal.marcelodolce.com/』はドメイン失効し、関連コンテンツは表示されなくなりましたが、現在は『http://izimodal.marcelodolza.com/』として公開されています。 何で変わったんでしょうか……(笑)。

スポンサーリンク

この記事が気に入ったら『いいね!』または『フォロー』で最新情報をチェック

スポンサーリンク

コメント

  1. 山田 より:

    突然すいません。わかりやすい解説でとてもわかりやすく、使わせていただいております。
    一つご質問なのですが、複数ウィンドウをグループ化した際に、例えば商品ページのようなギャラリーのページのサムネイルを押して、それぞれの画像が拡大化されたモーダルウィンドウを作ろうと思ったのですが、2番目3番目のサムネイルを押しても結局1番目の画像から表示されてしまいます。
    これを、各サムネイル画像をクリックして、そのサムネイル画像を拡大させるにはどのようにコードを書けばよろしいでしょうか。
    よろしくお願いいたします。

    • UZUREA編集部 より:

      解決できるかわかりませんが、どこかで現状の動作を確認できるサンプルページなどご用意していただければ、確認してみます。

      • 山田 より:

        ご返信いただきありがとうございます。
        以下、現在作成中のページです、
        http://xd010143.html.xdomain.jp/gallery.html
        こちらのギャラリーのページの、例えば2枚目の画像を押せば2枚目からモーダルウィンドウが始まる、というようにしたいと考えております。
        よろしくお願いいたします。

        • UZUREA編集部 より:

          拝見しました。
          きちんとテストしていませんが、開きたいコンテンツにそれぞれ一意のclassを振付与した上で、呼び出すボタンの『data-izimodal-open=』属性の指定を変更すれば良いのではないでしょうか。

          例)
          --------------------------
          <li data-iziModal-open=".iziModal"><img src="img/gallery/w01.jpg" alt="#" ><p>器たち</p></li>
          <li data-iziModal-open=".iziModal"><img src="img/gallery/w02.jpg" alt="#" ><p>工房</p></li>
          <li data-iziModal-open=".iziModal"><img src="img/gallery/w03.jpg" alt="#" ><p>素焼き</p></li>
          --------------------------
          ↓
          --------------------------
          <li data-iziModal-open=".izicontent01"><img src="img/gallery/w01.jpg" alt="#" ><p>器たち</p></li>
          <li data-iziModal-open=".izicontent02"><img src="img/gallery/w02.jpg" alt="#" ><p>工房</p></li>
          <li data-iziModal-open=".izicontent03"><img src="img/gallery/w03.jpg" alt="#" ><p>素焼き</p></li>
          
          <div class="izicontent01" data-izimodal-title="グループの1つ目のコンテンツです" data-izimodal-subtitle="直立。※ヘッダータイトル下部説明文">1<!-- / .iziModal --></div>
          <div class="izicontent02" data-izimodal-title="グループの2つ目のコンテンツです" data-izimodal-subtitle="直立。※ヘッダータイトル下部説明文">2<!-- / .iziModal --></div>
          <div class="izicontent03" data-izimodal-title="グループの3つ目のコンテンツです" data-izimodal-subtitle="直立。※ヘッダータイトル下部説明文">3<!-- / .iziModal --></div>
          --------------------------

          お試しの上、参考になれば幸いです。

スポンサーリンク