こんにちは。
今回はおしゃれなアニメーションのモーダルウィンドウを実装できるjQueryプラグイン「iziModal」！です。
コンテンツやiframe、フォームやアラートなども可能なレスポンシブ対応のモーダルウィンドウを実装できる軽量jQueryプラグインを紹介します。
おしゃれなアニメーションのモーダルウィンドウを実装できるjQueryプラグイン「iziModal」！
iziModal
jQueryプラグイン「iziModal」をダウンロードしてみよう！
https://github.com/dolce/iziModalにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。
jQueryプラグイン「iziModal」を設置してみよう！
iziModal.min.cssをhead内に読み込みます。
1 | <link rel="stylesheet" href="iziModal.min.css"> |
jQuery本体とiziModal.min.jsを/bodyの手前に読み込みます。
1 2 | <script src="js/jquery.min.js" type="text/javascript"></script> <script src="iziModal.min.js" type="text/javascript"></script> |
その下に下記のスクリプトを記述します。
1 2 3 4 5 6 | <script> $(document).on('click', '.trigger', function (event) { event.preventDefault(); $('#modal').iziModal('open', this); // Do not forget the "this" }); </script> |
html部分を記述します。
リンク部分に先程指定した「trigger」というclassを付けますよ。
モーダルウィンドウで表示させたい箇所に先程指定した「modal」というidを付けます。
1 2 3 4 5 6 | <!-- Trigger to open Modal --> <a href="https://github.com/dolce/iziModal" class="trigger">Modal</a> <!-- Modal structure --> <div id="modal"> <!-- Page content --> </div> |
オプションも豊富なので、様々なシーンで活躍できそうですね。
以上でおしゃれなアニメーションのモーダルウィンドウを実装できるjQueryプラグイン「iziModal」！でした。
