jQuery Quick Modal

JavaScript

CSS駆動によるカスタマイズ性に優れたモーダルウィンドウ「jQuery Quick Modal」

jQuery Quick Modalは、CSS駆動によるカスタマイズ性に優れたかっこいいモーダルウィンドウを実装することができるjQueryプラグインです。アニメーションの種類もいろいろ用意されているほか、スピードやタイミングなど細かいセッティングもオプションからできます。

多彩なアニメーション

デモ

デモでは画面中央に「CLICK ME」と書かれたボタンが設置されていて、ここをクリックするとアニメーション付きのモーダルウィンドウが表示される仕組みです。

オーバーレイで背景が暗くなり、モーダルウィンドウ内のコンテンツをグッと引き立ててくれます。モーダルウィンドウ内の右上にある「×」、もしくは背景をクリックすると元の状態に戻ります。

また、画面右側には「NEXT」ボタンがあり、ここから次のデモを見ることができます。デモは全部で4つ用意されています。

jQuery Quick Modalにはオプションもいろいろ付いています。主なオプションは、animation、speed、timing、closeModalSelector、enableEsc、enableClickAway、enableBodyScroll、appendBackgroundTo、onOpen、onCloseといった項目があります。

  • fade
  • fade-up
  • fade-right
  • fade-down
  • fade-left
  • fade-zoom
  • fade-zoom-up
  • fade-zoom-right
  • fade-zoom-down
  • fade-zoom-left
  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier(n, n, n, n)

それから、onOpenとonCloseはコールバック関数になります。

というわけで、多彩なアニメーションでカスタマイズ性に優れたモーダルウィンドウを実装したいという人は、ぜひ「jQuery Quick Modal」をチェックしてみてはいかがでしょうか?

jQuery Quick Modal

関連記事

  1. timedropper

    JavaScript

    時刻を指定しやすくしてくれるjQueryのタイムピッカー「timedropper」

    timedropperは時刻の指定をしやすいUIを実装できるjQuer…

  2. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  3. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  4. no-image

    JavaScript

    多彩なコンテンツ表示やカスタマイズ性を有する「LC Lightbox」

    LC Lightboxは画像や動画など多彩なコンテンツ表示ができたり高…

  5. FlexNav

    JavaScript

    見た目もシンプルでレスポンシブ対応のナビゲーションメニューを実装できるjQueryプラグイン「Fle…

    シンプルなデザインでレスポンシブにも対応したナビゲーションメニューを実…

  6. Yet Another Ripple Plugin

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP