jQuery『iziModal』で自由度の高いモーダルウインドウを実装。[Web制作/メディア運営のご相談なら]HOMEWeb制作jQuery『iziModal』で自由度の高いモーダルウインドウを実装。window)』機能。年齢制限やシステムのアラート、用語解説、外部サイトの動画表示や画像読込など、さまざまなシーンに利用できるこのモーダルウィンドウですが、設定の簡単さとオプションの充実度、さらにお手軽に格好良いアニメーションが実装できる点からお勧めしたいのが今回解説するjQueryプラグイン『iziModal』※です。※おそらく『イージー・モーダル』と読むのだと思います。今回はこの設置手順とサンプルを交えた使い方、そして各種オプションの詳細を動作デモを交えて解説していこうと思います。まとめと、ライセンスについて『iziModal』の主な機能と特徴まずはiziModalの主な機能と特徴をピックアップしていきましょう。基本的な機能はもちろんですが、アニメージョンやウィンドウのヘッダー部分をオプションで容易に作成できるお手軽さで、是非とも一度設置してみたくなるモーダルウィンドウだと思いませんか?『iziModal』の基本的な設置手順と解説それでは、iziModalの設置方法を順を追って解説していきましょう。オフィシャルサイトからダウンロードとデータ展開まずは『iziModal』のオフィシャルサイトからデータ一式をダウンロードします。ボタンが小さくて見落としてしまいそうですが、ページ上部SNS関係のボタンに紛れている『Download』をクリックダウンロードしたzipファイルを解凍し、その中に格納されているファイルを使用します。余談ですが当編集部ではWinRARを使ってますZipアーカイブの内容アーカイブ中の「iziModal.css」「iziModal.min.js」の2つがあれば最低限iziModalを動作させることができます。必要最低限の記述で『iziModal』を動作させる動作に必要なHTMLの記述は下記の通りです。head要素内で......jQuery本体iziModalのjsファイルiziModalのcssiziModalのテーマcssをhead要素内で読み込みます。/>※パスは適宜変更してください。続いてトリガーとなるボタンや、リンクを記述し、そこをクリック(orタップ)したときに表示させたいコンテンツを記述していきます。data-izimodal-subtitle="ヘッダータイトルの下部に表示される説明文(無くても動作します)"><p>ここにコンテンツを記述していきます。--></div>最後に同じく設定をjQueryのお約束に則って記述していきます。最低限の記述は下記だけでOKです。※セレクタは前述のhtmlで付与したクラス(またはID)を指定します。type="text/javascript">$(function(){$(".iziModal").iziModal();})</script>ひとまず、以上でOK。ボタンをクリックすると、Modalウィンドウが浮かび上がります。シンプルな基本設定で動作する『iziModal』デモはこちらにゅるにゅる!っと控えめなアニメーションも心地よいです。iziModalは、ボタン側で指定したセレクタ(data-iziModal-open=””)と、モーダル表示させたい要素のセレクタ名が一致していれば動作します。※デモでは「button」を使用していますが、a要素などトリガーとなる要素は何でも大丈夫です。続いては複数の内容をグループ化して表示するタイプの設定をしてみましょう。"#91b500",});})groupオプションは必須ですが、その値“group01”は任意の名称で設定してください。loopオプションも必須ではありませんが、trueを設定する事で最後のスライドの次は最初のスライドへ......と、無限ループしてくれます。おまけとして、今回はModalウィンドのヘッダーの色を変えるheaderColorオプションを記述してみましょう。あとはセレクタをクラスで指定した要素を複数用意すればOKです。data-izimodal-subtitle="直立。style="text-align:center;padding:10px;">ここにコンテンツを記述していきます。<br>画像を配置してみましょう。data-izimodal-subtitle="戦闘力が高まる。style="text-align:center;padding:10px;">ここにコンテンツを記述していきます。data-izimodal-subtitle="だらける。style="text-align:center;padding:10px;">ここにコンテンツを記述していきます。--></div>画像やインラインスタイルなどの設定も動作可否には影響しませんので自由度が高いですね。複数ウィンドウをグループ化する『iziModal』のデモはこちらiframeで外部コンテンツを読み込む『iziModal』設定Youtubeや独立したページなどをiframeで表示させることもできます。"bounceOutDown"});</script>設定オプションではiframeをtrueに、モーダル領域の最大化を許可するオプションfullscreenも追加してみましょう。おまけとして、headerColorの他、モーダル領域の背景色を変更するbackground、モーダル表示時のアニメーション設定transitionInとモーダルClose時のtransitionOutも設定します。各値については本記事下部にて、表にしていますのでそちらをご確認ください。--></div>htmlを表示させるウィンドウ要素の属性「data-izimodal-iframeURL」にモーダル内にiframeで表示させたいコンテンツのアドレスを記載します。iframeの『iziModal』デモはこちらその他オプションの一覧を掲載デモを見ていただくと分かるように、特殊な独自カスタマイズをせずとも、痒い所に手が届くカスタマイズが可能なのが『iziModal』です。以下に、公式オプションの一覧を掲載いたしますので、公式ドキュメントと併せてご確認ください。豊富なオプションに加え、テーマやスタイルシートもカスタマイズする事でさらに表現方法は広がります。通常htmlの記述順で左から右へと表示されるが、右から左へと変更する。%・px・em・cmが使用可能。trueの場合、自動的に開く。モーダル構造の準備ができたときに実行されるコールバック関数まとめと、ライセンスについて今回はiziModalの設定方法とオプションについて解説いたしましたが、如何でしたでしょうか。