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

    レスポンシブ対応のスタイリッシュなスライドショー実装「offbeatSlider」

    offbeatSliderはレスポンシブに対応したアニメーション付きの…

  2. Pushbar.js

    JavaScript

    スライドでコンテンツを引き出せる「Pushbar.js」

    Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引…

  3. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  4. jquery.square.js

    JavaScript

    スクエアなグリッドレイアウトを実装できる「jquery.square.js」

    jquery.square.jsは、スクエアなグリッドレイアウトを実装…

  5. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  6. iconate.js

    JavaScript

    アイコンをオシャレにアニメーションしながらtransformさせる「iconate.js」

    iconate.jsはアイコンをアニメーションさせながら別のアイコンへ…

最近の記事

  1. KPS-88
  2. Happy Plugs AIR1
  3. cheero Stream 10000mAh
  4. BOSE HOME SPEAKER 300
  5. RP-PC112

アーカイブ

PAGE TOP