NO IMAGE

JavaScript

フレキシブルで軽量なJavaScriptモーダル実装「Vanilla Modal」

Vanilla Modalは、フレキシブルでファイル容量も軽量なCSS主導によるJavaScriptモーダルを実装することができます。jQueryなどの依存性もなくシンプルに使えるほか、オプションもいくつか用意されているのでちょっとしたカスタマイズをしたい人にも便利ですね。

Vanilla Modal

デモ

デモでは「ONE PRODIGIOUS CAT」「ONE MORE PRODIGIOUS CAT」「EXAMPLE WEBSITE」の3つのメニューが設置されていて、各メニュー項目をクリックするとモーダルウィンドウが立ち上がります。

画像やウェブサイトなどをシンプルにモーダルウィンドウで表示させたい時に役立ちますね。

モーダルウィンドウ起動中は背景にオーバーレイがかかるほか、ウィンドウ内の右上にはバツ印が表示されていて、ここをクリックするかもしくはウィンドウ外をクリックするとモーダルウィンドウが閉じられます。

マークアップもスッキリ記述できて使い方も簡単なほか、オプションによるセッティング変更も可能です。

主なオプションは、modal、modalInner、modalContent、open、close、page、loadClass、class、clickOutside、closeKeys、transitions、onBeforeOpen、onBeforeClose、onOpen、onCloseです。

フレキシブルでjQueryなどによる依存性のない軽量・シンプルなモーダルウィンドウを実装したいという人は、ぜひ「Vanilla Modal」をチェックしてみてはいかがでしょうか?

Vanilla Modal

関連記事

  1. no-image
  2. Luminous

    JavaScript

    軽くてシンプルなLightboxを実装できるスクリプト「Luminous」

    Luminousを使えば軽くてシンプルなLightboxを実装すること…

  3. kissui.scrollanim

    JavaScript

    スクロールによる多彩なアニメーションを実装できる「kissui.scrollanim」

    kissui.scrollanimは、CSS3を活用したスクロールによ…

  4. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  5. Flurry

    JavaScript

    Webページに雪を美しく降らせる冬にピッタリのjQueryプラグイン「Flurry」

    FlurryはWebページに雪を美しく降らせてくれるアニメーションを実…

  6. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP