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

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

関連記事

  1. JavaScript

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

  2. jQuery LED

    JavaScript

    LEDディスプレイのようなカウントダウン・タイマー・時計を実装できる「jQuery LED」

    jQuery LEDは、LEDディスプレイで表示されるようなカウントダ…

  3. Drooltip.js

    JavaScript

    拡張性の高い美しいツールチップを実装できる「Drooltip.js」

    Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実…

  4. Foxholder
  5. ShowMore.js

    JavaScript

    長いコンテンツを折りたためるjQueryプラグイン「ShowMore.js」

    ShowMore.jsは長いコンテンツを折りたたんで表示・非表示を簡単…

  6. jQuery.mousetip

    JavaScript

    マウスの動きや位置に追従してくるツールチップを実装できる「jQuery.mousetip」

    jQuery.mousetipはマウスの動きや位置に追従してくる軽量の…

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP