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. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  2. bootstrap-wysihtml5

    JavaScript

    シンプルで美しいWYSIWYGエディタを実装できる「bootstrap-wysihtml5」

    bootstrap-wysihtml5はシンプルでスッキリしたデザイン…

  3. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  4. Erge Drop Down Menu Control
  5. Warp drive jQuery plugin
  6. FlexSlider

    JavaScript

    jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法

    すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探し…

最近の記事

  1. 簡易アクセス
  2. SOUNDLINK MINI II Special Edition
  3. メリーストロベリーケーキフラペチーノ

アーカイブ

PAGE TOP