お久しぶりです！
GORILLA-Yです！

今回はjQueryのプラグインでよさげな
モーダルウィンドウプラグイン「iziModal」をご紹介。
オシャレなエフェクトがいい感じです！
レスポンシブも対応ということでこいつぁ使ってみないとね！
ライセンスは2017年5月時点でApache2.0。
制作会社にとっては嬉しい限りですね(^ ^)

では早速使ってみましょー！

iziModalのファイルを入手

まずはiziModalを動作させるため、必要なファイルを入手しましょう。

必要なファイルは本体ファイルのjsと、
cssファイル。あとはプラグインを動作させるためのjQuery本体です。

iziModal本体は公式サイト/GitHubを参照すると
npmやbowerなどのパッケージマネージャーで配布していたり、
CDNにもファイルを置いているようですのでまずは確認してみましょう。

iziModal

公式サイト
http://izimodal.marcelodolce.com/

GitHub
http://izimodal.marcelodolce.com/

CDN
https://cdnjs.com/libraries/izimodal

githubや公式サイトからダウンロードするもよし、パッケージマネージャーから
インストールするもよし。お好きなところから入手しましょう。

僕はパッケージマネージャーのbowerを使ってるので、
今回はbowerを使ってインストールします。

bower install izimodal

jQueryもパッケージマネージャーをお使いでしたら一緒に導入してしまいましょう。

bower install jquery

jQueryは以下公式サイトからも直接ダウンロードできます。
手っ取り早く！って場合は以下からどうぞお使いください。

jQuery
https://jquery.com/

iziModalを設置して読み込ませる

次に上記で入手したファイルを読み込ませましょう。
お好きな名前のhtmlファイルに以下を記述してください。

必要なのは上記ファイルのみ3ファイルのみです。圧縮されたminifyファイルもあります。
ファイルを見ると45kbのファイルが圧縮されて24kbまで落ちています。
軽快で良いですね(^ ^)
JavaScriptファイルはなるべくbodyタグの終了タグ近くへ
cssファイルはhead内に記述しましょう。

実際に使ってみる

さて、ここまででiziModalを使う準備は完了です。
ではいざ動かしてみましょう。

基本の使い方

「.trigger-defaultというclass名のついたセレクタがクリックされたら、id名がmodalとついているものを開け」という感じですね。
これでモーダルウィンドウ自体は実装できるので、カスタムしたい方はオフィシャルサイトを読みながら、進めていくと良いと思います。

デモは以下をご確認ください。

See the Pen iziModal.js テスト デフォルト by yamadante (@yamadante) on CodePen.

iframe

youtubeなどのiframe形式のものも対応しています。

上記でも問題ないのですが、画面いっぱいにでてしまってモーダルウィンドウ感がでませんね。
ていうか他のテキストどこいった。。。
なのでhtmlをdata属性を使った記述に変更し、scriptにオプションを足して
モーダルウィンドウとして表示してあげましょう。

iframeの動画がモーダルウィンドで表示されるかと思います。

data属性を使った記述は他にもいっぱいありますのでぜひ試してみてくださいね
デモは以下

メッセージアラート

このプラグインで個人的にイチオシなのがこちらのアラート機能。
表示後、何秒後に消えるなど、プログレスバーの表示が嬉しいですね。
「データの送信に成功しましたー」とか「失敗しました〜」なんて
文字通りメッセージ表示で重宝しそうですね！

See the Pen jwByJO by yamadante (@yamadante) on CodePen.

いかがでしたか？
画面の感じもいい感じですし、
パパっとモーダルウィンドウを実装したいときなどに、
重宝しそうです！

デモはcodepen上で動かしていますが、なぜかcodepen上ですと、
中央寄せが失敗するのでcssで軽く調整しています（^　^；）

以上、現場からでした〜