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

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

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

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

『iziModal』の主な機能と特徴

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

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

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

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

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

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

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

ダウンロードした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>

設定オプションではiframeをtrueに、モーダル領域の最大化を許可するオプション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’	ヘッダーの背景色を指定
background	null	モーダルウィンドウの背景色を指定
theme	”	空白か「light」から選択
icon	null	ヘッダーのアイコンフォントのクラス名
iconText	null	ヘッダーの文字を含むアイコンフォントのクラス名
iconColor	”	アイコンの文字色指定
rtl	false	Right to Left 通常htmlの記述順で左から右へと表示されるが、右から左へと変更する。
width	600	固定幅。 %・px・em・cmが使用可能。単位なしでpxに
top	null	上の余白
bottom	null	下の余白
borderBottom	true	下部に線を表示させるか否か
padding	0	モーダルウィンドウの内側の余白
radius	3	角丸の半径
zindex	999	重なり順
iframe	false	trueの場合、モーダル内でiframeが使用される
iframeHeight	400	iframeの高さ
iframeURL	null	モーダル内のiframeで開かれるURL
focusInput	true	trueにすると、モーダルを開くたびに最初の可視フィールドがactiveになる
group	”	同じグループ名でグループを作成するとスライドできる
loop	false	同じグループのスライドをループ可能にするか否か
navigateCaption	true	スライドの矢印を表示するか否か
navigateArrows	true	矢印の位置変更。 「closeToModal」か「closeScreenEdge」 を選択
history	false	ハッシュで閲覧履歴を有効にする
restoreDefaultContent	false	モーダルをデフォルトにリセットしてもう一度開く
autoOpen	0	trueの場合、自動的に開く。数値の場合ミリ秒単位で遅延指定
bodyOverflow	false	モーダルを開くときにドキュメントに隠されたオーバーフローを強制し、モーダルを閉じると、オーバーフローが復元される
fullscreen	false	ヘッダー部分にフルサイズに拡大するボタンを表示する
openFullscreen	false	フルスクリーンで開く
closeOnEscape	true	trueの場合「Esc」キーで閉じる
closeButton	true	ヘッダーの閉じるボタンを表示する
appendTo	‘body’	モーダルウィンドウの配置場所
appendToOverlay	‘body’	モーダルウィンドウのオーバーレイの配置場所
overlay	true	背景オーバーレイの有無
overlayClose	true	trueの場合背景のオーバーレイ部分をクリックすると閉じる
overlayColor	‘rgba(0, 0, 0, 0.4)’	背景オーバーレイの色指定
timeout	false	モーダルウィンドウが閉じられるまでの時間をミリ秒単位で指定
timeoutProgressbar	false	タイムアウトの進行状況バーを表示する
pauseOnHover	false	マウスカーソルがモーダルをホバーすると進行状況バーを一時停止する
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」
onFullscreen	function(){}	モーダルがフルスクリーンを有効または無効にするときに実行されるコールバック関数
onResize	function(){}	サイズ変更が発生したときに実行されるコールバック関数
onOpening	function(){}	モーダルを開くときに実行されるコールバック関数
onOpened	function(){}	モーダルが開いているときに実行されるコールバック関数
onClosing	function(){}	モーダルを閉じるときに実行されるコールバック関数
onClosed	function(){}	モーダルが閉じられたときに実行されるコールバック関数
afterRender	function(){}	モーダル構造の準備ができたときに実行されるコールバック関数

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

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

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

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

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

• iziModal オフィシャルサイト
• iZiModal GitHub

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