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

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

  2. TabTab.js

    JavaScript

    アニメーション付きで切り替わるjQueryのタブプラグイン「TabTab.js」

    TabTab.jsは素敵なアニメーション付きのタブコンテンツを実装する…

  3. FractionSlider

    JavaScript

    各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」…

    複数の各要素ごとにスライドアニメーションを設定できるjQueryプラグ…

  4. no-image

    JavaScript

    立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」

    Sidebar Menu Conceptは立体的なナビゲーションメニュ…

  5. jQuery Pretty Dropdowns
  6. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP