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. Stepper.js

    JavaScript

    数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

    Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンで…

  2. no-image
  3. no-image
  4. JavaScript

    サムネイルをクリックして拡大画像が見れるレスポンシブ対応のjQuery画像ギャラリー「Superbo…

    綺麗に並んだサムネイル画像をクリックして拡大画像を見ることができるjQ…

  5. slimMenu
  6. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

最近の記事

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

アーカイブ

PAGE TOP