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. GoogleSheets-HTMLImporter
  2. jQuery PieTimer

    JavaScript

    時間の経過とともに円形が欠けていくタイマー「jQuery PieTimer」

    jQuery PieTimerは時間の経過とともに円形のデザインが欠け…

  3. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  4. BIDEO.JS

    JavaScript

    背景動画をフルスクリーンで表示させるJSライブラリ「BIDEO.JS」

    BIDEO.JSは、webページの背景にフルスクリーンで動画を表示させ…

  5. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

  6. Combodate

    JavaScript

    日付や時間をドロップダウン式にしてくれる「Combodate」

    Combodateは日付や時間の入力をドロップダウン式に置き換えてくれ…

最近の記事

  1. YAECA ワイドテーパードデニム 10-13WW
  2. ADR-3ML39シリーズ
  3. キュレル モイスチャーバーム
  4. FUJIFILM X-Pro3
  5. iPhone 11 ProとApple Watch Hermès

アーカイブ

PAGE TOP