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

2018年7月9日2022年9月3日

URLをコピーしました！

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

iziModal.jsは手軽で高機能！

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

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

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

iziModal.jsのダウンロード

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

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

cdnjs

izimodal - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for develop... Elegant, responsive, flexible and lightweight modal plugin with jQuery. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-sourc...

iziModal.jsの基本的な使い方

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

1 2	<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>