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. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

  2. Checkify

    JavaScript

    軽量でカスタマイズ性も高いjQueryバリデーションプラグイン「Checkify」

    Checkifyは軽量でカスタマイズ性も高いバリデーション機能を実装で…

  3. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  4. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

  5. formToWizard

    JavaScript

    ステップごとに入力可能なフォームを実装できる「formToWizard」

    formToWizardはステップごとに(ウィザード)入力可能なフォー…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP