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. jQuery Social Share Bar
  2. JavaScript

    スクロールバーにあと何分で読めるかを表示してくれるjQueryプラグイン「jQuery Readin…

    とてもシンプルですが何気に便利そうだったので使ってみました。長文記事を…

  3. JavaScript

    縦スクロールすると横スクロール(水平移動)していくjQueryプラグイン「jInvertScroll…

    これおもしろいですね。縦スクロールすると垂直に移動していくのではなくて…

  4. Starfield

    JavaScript

    宇宙空間を移動するような背景アニメーションを実装できる「Starfield」

    Starfieldは宇宙空間を移動するような背景アニメーションを実装す…

  5. Nivo Zoom

    JavaScript

    Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」

    Lightbox風に画像をズームして表示させるjQueryプラグイン「…

  6. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP