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. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

  2. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

  3. JavaScript

    テキストに滑らかに動くアニメーションをつけることができるjQueryプラグイン「animateTex…

    テキストに滑らかに動くかっこいいアニメーションをつけることができるjQ…

  4. TextFit

    JavaScript

    テキストをコンテナ幅にすばやくフィットさせる「TextFit」

    TextFitは、一行または複数行のテキストをコンテナ幅(オプションに…

  5. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  6. jquery-steps

    JavaScript

    ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」

    jquery-stepsは、ステップ式のウィザードを実装することができ…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP