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. Responsive Sidebar Navigation
  2. lightGallery
  3. formToWizard

    JavaScript

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

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

  4. Starfield

    JavaScript

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

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

  5. bubbly-bg

    JavaScript

    幻想的なバブル背景アニメーションを実装できる「bubbly-bg」

    bubbly-bgは幻想的で美しいバブル(気泡)背景アニメーションを実…

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP