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

Macy.js軽量なグリッドレイアウトを実装できるJSライブラリ「Macy.js」前のページ

パワフルなローディングマスクを実装できるjQueryプラグイン「P-Loading」次のページP-Loading

関連記事

  1. Salvattore
  2. css3-mediaqueries-js

    JavaScript

    Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries…

    前回、Media Queriesの@mediaを使用したCSSをまとめ…

  3. FlexNav

    JavaScript

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

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

  4. Smooth Scroll behavior polyfill
  5. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

  6. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP