popModal

JavaScript

6種類のモーダルウィンドウを実装できる「popModal」

popModalは6種類のモーダルウィンドウを実装することができるjQueryプラグインです。単一の表示方法ではなく、複数のパターンから自分好みの表示方法をチョイスできるのがいいですね。いろんなサイトに対応できるモーダルウィンドウを探している人にオススメです。

popModal

デモ

  • popModal
  • notifyModal
  • hintModal
  • dialogModal
  • titleModal
  • confirmModal

popModalはボタンをクリックするとその下に表示されます。notifyModalは通知タイプのモーダルウィンドウです。表示されてから一定の時間が経つと消えていきます。hintModalはマウスオーバーすると表示されるタイプです。

また、dialogModalは背景にオーバーレイがかかるLightboxのようなモーダルウィンドウになります。デモではdialogModalのモーダルウィンドウを表示させると、右上に矢印が表示され、ここからコンテンツの前後移動ができる仕組みになっています。

titleModalはマウスオーバーで要素のtitle属性に指定したテキストを表示させることが可能です。confirmModalは、背景にオーバーレイがかかり、上からモーダルウィンドウが降りてくるタイプになります。

このように、popModalではさまざまなタイプのモーダルウィンドウを実装することができます。1種類だけの表示方法ではもの足りないという人は、ぜひpopModalを活用してみてはいかがでしょうか。

popModal

関連記事

  1. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  2. Image Gallery Threejs
  3. formToWizard

    JavaScript

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

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

  4. Image Figure Caption effects
  5. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  6. jQuery Flip-Quote

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP