jQueryプラグイン「iziModal.js」でモーダルウィンドウをオシャレに！

今回は、モーダルウィンドウを簡単に表示できるjQueryプラグイン「iziModal.js」を紹介します。
今やCSSでもBootstrapなどのフレームワークを利用するのが当たり前な時代ですが、JavaScriptにもスポットを当ててみると、もっとアニメーションをオシャレに演出できるjQueryプラグインがたくさんあります。

iziModal.jsは手軽で高機能！

iziModal.jsは、初心者やこだわりのない方向けに導入が簡単なだけでなく、もっとオシャレに凝った作りをしたい方にはも豊富なオプションがあります。
HTMLタグやコード量が減る上、標準でレスポンシブに対応していたり、iframeを使用するカルーセル風のグルーピングやAjax対応、オシャレなアニメーションなども付いていて至れり尽くせりです。

iziModal.jsでモーダルウィンドウ

特に説明するほどでもないですが、iziModal.jsの配布元と基本的な使い方を紹介していきます。

iziModal.jsのダウンロード

公式サイトがありますので、こちらからiziModal.jsをダウンロードするか、または英語がわかれば詳細がわかります。

公式サイトからしてオシャレですよね！
CDNもありますのでリンク貼っておきます！

iziModal.jsの基本的な使い方

それでは、iziModal.jsの基本的な使い方を説明します。
まずは、HTMLタグでiziModal.jsのCSSとJavaScriptを読み込みます。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.min.js" type="text/javascript"></script>

次に、モーダルウィンドウに表示させたいコンテンツとボタンを設置します。
iziModal.jsのモーダルウィンドウはヘッダーを書く必要がありません。

<!-- Modal structure -->
<div id="modal">
    <!-- data-iziModal-fullscreen="true"  data-iziModal-title="Welcome"  data-iziModal-subtitle="Subtitle"  data-iziModal-icon="icon-home" -->
    <!-- Modal content -->
</div>
<!-- Trigger to open Modal -->
<a href="https://github.com/dolce/iziModal" class="trigger">Modal</a>

iziModal.jsのサンプルデモ

もっと詳しく知りたい方はこちらを参考にどうぞ。
日本語ですよｗ