FModal.JS

JavaScript

シンプルなフルスクリーンのモーダルウィンドウ「FModal.JS」

FModal.JSはシンプルなフルスクリーンのモーダルウィンドウを実装できるJSライブラリです。設定したボタンをクリックすると、さりげないオシャレなエフェクトでフルスクリーンのモーダルウィンドウが表示されます。

FModal.JS

FModal.JS

デモではスライドアップ、ズームイン、フェードの3つの種類で立ち上がるモーダルウィンドウの動作をチェックできます。

どのエフェクトも違和感なくスムーズにフルスクリーン表示されますね。派手さがないぶん、とてもシンプルなのでいろんなサイトで使えるのではないでしょうか。

マークアップもとてもシンプルなので使いやすいのがいいですね。こんな感じでbuttonタグにdata-entrance、data-title、data-textなどを指定します。

<button data-entrance="modal-fade" data-title="タイトル" data-text="サンプルテキスト">Button-1</button>
  • data-entrance:エフェクト
  • data-title:タイトル
  • data-text:フルスクリーン時に表示するテキスト
  • modal-translate
  • modal-scale
  • modal-fade

そのほかフルスクリーン時にリンクつきボタンを設置する方法などもあるので、詳しい使い方が気になる方は是非チェックしてみてください。

jumboShareSNSシェアボタンとジャンボサイズのカウンターを設置できる「jumboShare」前のページ

円形のプログレスバーを実装できる「progresspieSVG」次のページprogresspieSVG

関連記事

  1. flatpickr

    JavaScript

    超軽量で使い方もカンタンな日付ピッカー「flatpickr」

    flatpickrはjQueryなどのライブラリに依存することなく動作…

  2. JavaScript

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

  3. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  4. StellarNav.js

    JavaScript

    レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

    StellarNav.jsはjQueryによるレスポンシブで多階層に対…

  5. Product Builder

    JavaScript

    カスタマイズ性に優れたオンラインストアに役立つ「Product Builder」

    Product Builderは、カスタマイズ性に優れたオンラインスト…

  6. no-image

    JavaScript

    シンプルなイメージスライダーとカルーセルを実装できる「SkySlider」

    SkySliderはシンプルで軽量、そしてレスポンシブにも対応したイメ…

最近の記事

  1. Anker PowerWave Pad Alloy
  2. Anker Bolder LC30
  3. BG-R10

アーカイブ

PAGE TOP