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

Scroll Indicatorシンプルなスクロールインジケーターを実装できる「Scroll Indicator」前のページ

レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」次のページUnite Gallery

関連記事

  1. jquery.resizeend

    JavaScript

    ウィンドウをリサイズした時にイベント発生できる「jquery.resizeend」

    jquery.resizeendは、ブラウザのウィンドウをリサイズした…

  2. StellarNav.js

    JavaScript

    レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

    StellarNav.jsはjQueryによるレスポンシブで多階層に対…

  3. JavaScript

    とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」

    個人的に使いやすそうだったので備忘録です。DropKickというjQu…

  4. jQuery ui material design datepicker
  5. no-image
  6. Cavendish.js

    JavaScript

    CSS transitionsを活用したシンプルなスライドショーを実装できるjQueryプラグイン「…

    CSS transitionsを活用したシンプルなスライドショーを実装…

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP