Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSSモーダルを実装することができます。コンテンツを表示させることはもちろん、画像をモーダルウィンドウ内に表示させることもできます。アニメーションの種類もかなり豊富なのがうれしいですね。
Light Modal
以下、Light Modalの実際のデモになります。
デモページでは、Open Simple Modal、Modal With Header/Footer、Open Image Modalの3つのサンプルが設置されています。各ボタンをクリックすると、それに応じたモーダルウィンドウが表示される仕組みです。
お洒落なアニメーションとともに表示されるモーダルウィンドウは、思わず見入ってしまいますね。
「Choose an Animation」から、さまざまなアニメーションを選択することができます。アニメーションの種類には、bounce、flash、pulse、rubberBand、shake、swing、tada、wobble、jelloなど、まだまだ他にもたくさんのアニメーションがあります。
ちなみに、アニメーションはAnimate.cssを使用します。
というわけで、パワフルで軽量、カスタマイズ性に優れたお洒落なCSSモーダルを実装できる「Light Modal」の紹介でした。Light Modalのダウンロード・詳細は、以下のページからチェックできます。
