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. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  2. Bootstrap Navbar Sidebar

    JavaScript

    サイドに固定できるナビゲーション実装「Bootstrap Navbar Sidebar」

    Bootstrap Navbar Sidebarは、サイドに固定できる…

  3. no-image

    JavaScript

    タッチ対応のドロワーコンポーネント「hy-drawer」

    hy-drawerはタッチに対応したドロワーコンポーネントです。And…

  4. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

  5. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

  6. no-image

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP