【jQuery】軽量でオシャレなモーダルウィンドウ《iziModal》

9,778 view

こんにちは、制作部のゆーたです。

今回はモーダルウィンドウを実装できるjQueryプラグイン『iziModal.js』をご紹介します。

軽量・洗練されたアニメーション・レスポンシブ対応と、なかなか使い勝手がよさそうなモーダルプラグイン。

ただ「iziModal」で検索してみても日本語で詳しく解説してるページがあまり見つからず…
しびれを切らしたため自分で書くことにしました。

というわけでここから、iziModal.jsの使い方を紹介していきます!

ファイルの準備

使用するファイルは2種類。

  • iziModal.min.css
  • iziModal.min.js

公式サイトGithubからダウンロードできます。
またその他にCDNから読み込んだり、NPMやBowerといったパッケージマネージャー経由でダウンロードすることもできます。

<!-- head内に設置 -->
<link rel="stylesheet" href="iziModal.min.css">
<!-- bodyの終了タグ付近に設置 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="iziModal.min.js" type="text/javascript"></script>

使い方

次に使い方をご紹介します。

デフォルトの使い方

HTML

<button class="modal-open">OPEN</button>
<div id="modal">
<div class="iziModal-content">
<a data-izimodal-close="">×</a>
<!-- コンテンツを記入 -->
</div>
</div>

モーダル起動用のボタンと、モーダルウィンドウの枠組みを設置。
data-izimodal-close属性を付与することで、クリックするとモーダルを閉じる役割を持たせることができます。

データ属性は他にも下記が用意されています。

◆ボタンに付与するもの

data-izimodal-open=”” モーダルを開く
data-izimodal-fullscreen=”” 開いているモーダルを全画面表示
data-izimodal-next=”” 次のモーダルに移動
data-izimodal-prev=”” 前のモーダルに移動

◆モーダルウィンドウに付与するもの

data-izimodal-group=”group1″ 同じ値をもつモーダルを
一つのグループとして扱う
data-izimodal-loop=”” 同一グループ内のモーダルを
スライド時にループさせる

JS

<script>
$("#modal").iziModal({
headerColor: "#4da9b7",
width: "80%",
overlayColor: "rgba(0, 0, 0, 0.4)",
transitionIn: "fadeInUp",
transitionOut: "fadeOutDown",
});
$(document).on("click", ".modal-open", function(e) {
e.preventDefault();
$("#modal").iziModal("open");
});
</script>

1〜7行目でオプションを設定しています。
公式サイトを見ると他にもオプションが多数用意されていますので、さらに細かいカスタマイズが可能です。詳しくはこちら
8〜11行目で、.modal-openをクリックした際にモーダルが立ち上がるよう、イベント設定を記述しています。

iframeを表示する場合

HTML

<button data-izimodal-open="#modal">OPEN</button>

今回はdata-izimodal-open属性を使用してみました。
そうするとJS側でクリックイベントを書く必要がなくなります。

JS

<script>
$("#modal").iziModal({
iframe: true,
iframeHeight: 800,
iframeURL: "https://cunelwork.co.jp/",
});
</script>

iframeを表示させるにはiframe:trueとした上でiframeURLに値を渡す必要があります。

Ajaxと連携する場合

非同期処理を行うAjaxと連携させることで、より高度なカスタマイズが可能になります。
例えば、他ページのコンテンツをモーダルとして表示させたり。
より具体的には「WordPressの投稿で、詳細ページへ遷移するのではなく投稿内容をモーダルとして表示させたい」といった場合に使えます。

JS

<script>
var doAjaxWithModal = function(modal){
$.ajax({
type: "GET",
url: "https://cunelwork.co.jp/?p=xxx",
data: {
"_get_json": "true",
},
}).done(function(data) {
$("#modal .iziModal-content").html(data);
}).fail(function() {
// データ取得失敗時のアクション
}).always(function() {
modal.stopLoading();
});
};
$("#modal").iziModal({
onOpening: function(modal){
modal.startLoading();
doAjaxWithModal(modal);
return false;
}
});
</script>

様々な状況に対応できるのがありがたい!

今回は紹介しきれませんでしたが、他にも様々なメソッドイベントが用意されています。
iframeやAjaxによるモーダル表示が手軽に実装できることからも、様々な状況を想定して作られているプラグインだと思います。

ぜひ実際に触って試してみてください!

\ SNSでシェア /

WRITER

ゆーた

制作 ゆーた

新潟生まれ新潟育ち。1992年生まれ。

制作部として奮闘中。たまにカメラも構える。
体力なさそうなのはデフォルトです。

TAGS