jQuery『iziModal』で自由度の高いモーダルウインドウを実装。設定方法とオプション解説 Eazy-T 公開:2018年1月14日（7年前） / 更新:2020年8月5日 コメント 5件 Web技術htmljQueryweb SNS X Facebook Ｂ! はてブ Pocket 当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。 webサイトでトリガーとなるボタンなどをクリックするとウィンドウが浮かび上がる『モーダル ウィンドウ (Modal window)』機能。 年齢制限やシステムのアラート、用語解説、外部サイトの動画表示や画像読込など、さまざまなシーンに利用できるこのモーダルウィンドウですが、設定の簡単さとオプションの充実度、さらにお手軽に格好良いアニメーションが実装できる点からお勧めしたいのが今回解説するjQueryプラグイン『iziModal』※です。※おそらく『イージー・モーダル』と読むのだと思います。 今回はこの設置手順とサンプルを交えた使い方、そして各種オプションの詳細を動作デモを交えて解説していこうと思います。 記事の索引1 『iziModal』の主な機能と特徴2 『iziModal』の基本的な設置手順と解説2.1 まずはオフィシャルサイトからダウンロードとデータ展開2.2 まずは必要最低限の記述で『iziModal』を動作させる2.3 複数ウィンドウをグループ化する『iziModal』2.4 iframeで外部コンテンツを読み込む『iziModal』設定2.5 その他オプションの一覧を掲載3 まとめと、ライセンスについて 『iziModal』の主な機能と特徴 まずはiziModalの主な機能と特徴をピックアップしていきましょう。 設置が簡単レスポンシブ対応ニュル！っと格好いいアニメーション軽快なファイルサイズと挙動豊富なカスタマイズオプションifram対応アラート表示（設定した時間で非表示、と言うのも可能）長いコンテンツにも対応グルーピング機能も対応 基本的な機能はもちろんですが、アニメージョンやウィンドウのヘッダー部分をオプションで容易に作成できるお手軽さで、是非とも一度設置してみたくなるモーダルウィンドウだと思いませんか？ 『iziModal』の基本的な設置手順と解説 それでは、iziModalの設置方法を順を追って解説していきましょう。 まずはオフィシャルサイトからダウンロードとデータ展開 まずは『iziModal』のオフィシャルサイトからデータ一式をダウンロードします。 ボタンが小さくて見落としてしまいそうですが、ページ上部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> 設定オプションでは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’ヘッダーの背景色を指定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で開かれるURLfocusInputtruetrueにすると、モーダルを開くたびに最初の可視フィールドが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制作者の皆様のお力になれば幸いです。また、設置に関してや、オプション関連でご不明な点があれば、当ページコメント欄でもお気軽にご相談ください。 iziModal オフィシャルサイト iZiModal GitHub ※2019年6月中旬、『iziModal』が公開されていたオフィシャルサイト『http://izimodal.marcelodolce.com/』はドメイン失効し、関連コンテンツは表示されなくなりましたが、現在は『http://izimodal.marcelodolza.com/』として公開されています。 何で変わったんでしょうか……(笑)。
