[2015版] 現場で使えそうなモーダル系jQueryプラグインを6つピックアップ

animatedModal.js

jsの勉強でモーダルのプラグインを作ろうかと思ったんですが、2015現在どんなプラグインがあるのか気になったのでいくつかピックアップしてみました。実際に、現場でも使えそうなものなのでこのまま使ってもいいと思いますよ〜

Ads

sweetalert

sweetalert
GitHub
Homepage

ダウンロード方法1

$ bower install sweetalert

ダウンロード方法2

$ npm install sweetalert

このほかにもZipでダウンロードもできます。

さらっと使ってみた感想

投稿完了とか送信完了とか送信に失敗しましたとかっていうときに使えそう。
レスポンシブにも対応
モーダルが軽快に「ピュン」ってでてくる
ボタンの色を変更したりするのも簡単

手っ取り早くモーダルだしたいとかなら使うのはありだと思う。複雑なレイアウトにするとかだと厳しそうなイメージ。
リッチなjavascript confirmって感じです。名前の通りalertとして使うのがよろしいかと。

lighterbox

lighterbox
GitHub
lighterbox Example

さらっと使ってみた感想

よくあるシンプルなlightboxって感じでした。画面下にテキストをいれたり背景の色を変更したりできます。
シンプルなのでカスタマイズがしやすそうなイメージです。

jquery-plainmodal

jquery-plainmodal
GitHub
Homepage

さらっと使ってみた感想

基本的にモーダルを出すだけのプラグインって感じです。なので、デザインとか自分でcssを書いたり、jsで位置を調整したりと結構難しめ。js初心者には実装するのは難しいかもしれません。

でも、プロジェクトの場合こうゆうプラグインのほうが良い場合が多いんですよね〜。ページよって出てくるタイミング違ったり、サイズが違くしたいとかの要望が必ずあるので。

featherlight

featherlight
GitHub
Homepage

さらっと使ってみた感想

オプションも多く用意されています。さらに、imageとかiframeとかもできるみたいですね。
注意点としては、

.lightbox {
  display: none;
}

lightboxで出したいコンテンツはdisplay:none;しておかないと、最初に描画され、かつmodalでもでてきてしまいます。一見、複雑そうですけど、仕組みは簡単なので扱いやすいかと思います。

Remodal

Remodal
GitHub
Homepage

bowerでインストール

bower install remodal

さらっと使ってみた感想

<div class="remodal" data-remodal-id="modal">
    <h1>Remodal</h1>
    <p>
      Flat, responsive, lightweight, fast, easy customizable modal window plugin
      with declarative state notation and hash tracking.
    </p>
    <br>
    <a class="remodal-cancel" href="#">Cancel</a>
    <a class="remodal-confirm" href="#">OK</a>
</div>
<a href="#modal">Call the modal with data-remodal-id="modal"</a>

最低限これくらいは書かないとみたいです。cssもプラグインで用意されているので、classの付け方とか気をつけないといけないですね。

animatedModal.js

animatedModal.js
Github
Homepage

さらっと使ってみた感想

なんか公式サイトがすげー親切!!
順番にコピペしていけばできるよってなってます。

アニメーションしてモーダルが出てくるようにできます。今までのものとひと味違うかも。

まとめ

今回はモーダル系のjQueryプラグインを作ってみました。いろんなプラグインがあるんですね。特にアニメーションで出現とかはおもしろそうなので今度機会があったら使ってみたくなりました。

これからコードを熟読してjsの勉強がてらプラグインを作ってみようと思います。ではでは。

オススメの本



作りながら学ぶjQueryデザインの教科書

jQueryを作って学ぶのにオススメの本です。「アコーディオン」「ドロップダウンメニュー」や「モーダルウィンドウ」などよく使うUIを作りながらjQueryの基本を学べます。

いいなと思ったらシェアお願いします

同じタグで検索

Ads
ページの先頭へ