今やBootstrapなどのCSSフレームワークを利用するのが当たり前な時代です。
欲しい機能がほとんど詰まっているので、つい全ての機能をそれに頼って使っています。
しかし、それぞれの機能にスポットを当ててみると、もっとオシャレに演出できるjQueryのプラグインがたくさんあります。
今回紹介するのは、モーダルを簡単に表示できるjQueryプラグイン「iziModal.js」を紹介します。
iziModal.jsは手軽で高機能！
iziModal.jsは初心者やこだわりのない方向けに導入が簡単なだけでなく、凝った作りをしたい方にはも豊富なオプションがあります。
HTMLタグやコード量が減る上、標準でレスポンシブに対応していたり、iframeを使用するカルーセル風のグルーピングやAjax対応、オシャレなアニメーションなども付いていて至れり尽くせりです。
iziModal.jsでモーダルウィンドウ
特に説明するほどでもないですが、iziModal.jsの配布元と基本的な使い方を紹介していきます。
ダウンロード
公式サイトがありますので、こちらからiziModal.jsをダウンロードするか、または英語がわかれば詳細がわかります。
公式サイトからしてオシャレですよね！
CDNもありますのでリンク貼っておきます！
基本的な使い方
まずは、プラグインを読み込みます。
<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>サンプルデモ
もっと詳しく知りたい方はこちらを参考にどうぞ。
日本語ですｗ
- Original:https://minory.org/izimodal-js.html
- Source:Minory
- Author:管理者