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

Unsplash Itかっこいいダミー画像を読み込めるWebサービス「Unsplash It」前のページ

ウィンドウをリサイズした時にイベント発生できる「jquery.resizeend」次のページjquery.resizeend

関連記事

  1. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  2. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  4. MenuSpy

    JavaScript

    セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

    MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリ…

  5. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  6. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

最近の記事

  1. ハムエッグホットサンドとドリップコーヒー
  2. 高輪ゲートウェイ駅のスタバ
  3. 新幹線
  4. リッチモンドホテル
  5. ハーブバターチキン 石窯フィローネとドリップコーヒー

アーカイブ

PAGE TOP