FModal.JSはシンプルなフルスクリーンのモーダルウィンドウを実装できるJSライブラリです。設定したボタンをクリックすると、さりげないオシャレなエフェクトでフルスクリーンのモーダルウィンドウが表示されます。
FModal.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属性の詳細です。
- data-entrance：エフェクト
- data-title：タイトル
- data-text：フルスクリーン時に表示するテキスト
また、data-entranceには以下の3つの値のなかから設定できます。
- modal-translate
- modal-scale
- modal-fade
そのほかフルスクリーン時にリンクつきボタンを設置する方法などもあるので、詳しい使い方が気になる方は是非チェックしてみてください。
