HOME > 制作 > Javascript > おしゃれなアニメーションのモーダルウィンドウを実装できるjQueryプラグイン「iziModal」！

おしゃれなアニメーションのモーダルウィンドウを実装できるjQueryプラグイン「iziModal」！

Javascript

2016/08/03

こんにちは。
今回はおしゃれなアニメーションのモーダルウィンドウを実装できるjQueryプラグイン「iziModal」！です。

コンテンツやiframe、フォームやアラートなども可能なレスポンシブ対応のモーダルウィンドウを実装できる軽量jQueryプラグインを紹介します。

おしゃれなアニメーションのモーダルウィンドウを実装できるjQueryプラグイン「iziModal」！

iziModal

izimodal

DEMO DOWNLOAD

jQueryプラグイン「iziModal」をダウンロードしてみよう！

https://github.com/dolce/iziModalにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

jQueryプラグイン「iziModal」を設置してみよう！

iziModal.min.cssをhead内に読み込みます。

<link rel="stylesheet" href="iziModal.min.css">

1	<link rel="stylesheet" href="iziModal.min.css">

jQuery本体とiziModal.min.jsを/bodyの手前に読み込みます。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="iziModal.min.js" type="text/javascript"></script>

1 2	<script src="js/jquery.min.js" type="text/javascript"></script> <script src="iziModal.min.js" type="text/javascript"></script>

その下に下記のスクリプトを記述します。

<script>
$(document).on('click', '.trigger', function (event) {
    event.preventDefault();
    $('#modal').iziModal('open', this); // Do not forget the "this"
});
</script>

$(document).on('click', '.trigger', function (event) {

event.preventDefault();

$('#modal').iziModal('open', this); // Do not forget the "this"

});

</script>

html部分を記述します。
リンク部分に先程指定した「trigger」というclassを付けますよ。
モーダルウィンドウで表示させたい箇所に先程指定した「modal」というidを付けます。

<!-- Trigger to open Modal -->
<a href="https://github.com/dolce/iziModal" class="trigger">Modal</a>
<!-- Modal structure -->
<div id="modal">
    <!-- Page content -->
</div>

<a href="https://github.com/dolce/iziModal" class="trigger">Modal</a>

</div>

jQueryプラグイン逆引きハンドブック