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

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

この記事をSNSでシェア

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

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

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

スポンサーリンク

『iziModal』の主な機能と特徴

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

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

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

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

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

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

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

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

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

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

Zipアーカイブの内容

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

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

動作に必要なHTMLの記述は下記の通りです。

まずはhead要素内でjQueryと、iziModal、iziModalのcssとテーマ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’ ヘッダーの背景色を指定
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制作者の皆様のお力になれば幸いです。また、設置に関してや、オプション関連でご不明な点があれば、当ページコメント欄でもお気軽にご相談ください。

スポンサーリンク
記載内容につきまして

掲載記事に関しまして

当サイトの掲載記事は、UZUREA.NETスタッフやパートナーライターの主観によって執筆しています。内容については、実際の事象やスペック、用途と異なる場合がございます。
また記載する製品やサービスの内容が正式スペックや保証範囲の適用外となる場合もありますので、あらかじめご了承ください。

この記事をSNSでシェア