jQuery Quick Modalは、CSS駆動によるカスタマイズ性に優れたかっこいいモーダルウィンドウを実装することができるjQueryプラグインです。アニメーションの種類もいろいろ用意されているほか、スピードやタイミングなど細かいセッティングもオプションからできます。
多彩なアニメーション
以下、jQuery Quick Modalのデモページです。
デモでは画面中央に「CLICK ME」と書かれたボタンが設置されていて、ここをクリックするとアニメーション付きのモーダルウィンドウが表示される仕組みです。
オーバーレイで背景が暗くなり、モーダルウィンドウ内のコンテンツをグッと引き立ててくれます。モーダルウィンドウ内の右上にある「×」、もしくは背景をクリックすると元の状態に戻ります。
また、画面右側には「NEXT」ボタンがあり、ここから次のデモを見ることができます。デモは全部で4つ用意されています。
jQuery Quick Modalにはオプションもいろいろ付いています。主なオプションは、animation、speed、timing、closeModalSelector、enableEsc、enableClickAway、enableBodyScroll、appendBackgroundTo、onOpen、onCloseといった項目があります。
animationの種類は全部で次のとおりです。
- fade
- fade-up
- fade-right
- fade-down
- fade-left
- fade-zoom
- fade-zoom-up
- fade-zoom-right
- fade-zoom-down
- fade-zoom-left
また、timingの値は以下の中から指定できます。
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- cubic-bezier(n, n, n, n)
それから、onOpenとonCloseはコールバック関数になります。
というわけで、多彩なアニメーションでカスタマイズ性に優れたモーダルウィンドウを実装したいという人は、ぜひ「jQuery Quick Modal」をチェックしてみてはいかがでしょうか？
jQuery Quick Modalの具体的な使い方やダウンロードに関しては、以下のページからどうぞ。
