no-image

JavaScript

フルスクリーンによるjQueryモーダルウィンドウ実装「FullMod」

FullModはフルスクリーンによるモーダルウィンドウを実装できるjQueryプラグインです。アニメーション付きのモーダルウィンドウで、しかもフルスクリーンというダイナミックさがいい感じですね。

FullMod

デモ

デモでは「Click me」というボタンが設置されていて、ここをクリックすると下から上へスライドしながらモーダルウィンドウが立ち上がります。一方、モーダルウィンドウを閉じる場合は、モーダルウィンドウ内の右上にあるバツ印をクリックすればOKです。閉じられる時は、今度は上から下へスライドしながらモーダルウィンドウが非表示になります。

アニメーションはクイックに動作するので、煩わさもなく操作性も良好です。

使い方もシンプルで分かりやすく、イベントやメソッドもいくつか用意されています。主な項目は、onShowing(params)、onShown、onHidding(params)、onHidden、show(params)、hide(params)です。

というわけで、アニメーション付きのフルスクリーンによるモーダルウィンドウを実装できるjQueryプラグイン「FullMod」の紹介でした。

FullMod

関連記事

  1. Slyder

    JavaScript

    レスポンシブ対応のスライダーナビゲーションを実装できる「Slyder」

    Slyderはレスポンシブに対応したスライダーナビゲーションを実装でき…

  2. no-image
  3. jCalculator

    JavaScript

    jQueryプラグインで電卓を実装できる「jCalculator」

    jCalculatorというjQueryプラグインを使えば入力フィール…

  4. no-image

    JavaScript

    セクション間をスムーズにスクロールできる「Scroll Control」

    Scroll Controlはセクション間をスムーズにスクロールできる…

  5. Zoomerang.js

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP