no-image

JavaScript

レスポンシブ対応の軽量・コンパクトでシンプルなモーダルボックス「Modelo」

Modeloは軽量・コンパクトなモーダルボックスを実装できるjQueryモーダルプラグインです。デザインもシンプルでレスポンシブにも対応しています。カスタマイズ性もそれなりに備えているところがいいですね。

Modelo

デモ

デモでは「OPEN MODAL」というボタンをクリックするとモーダルボックスが開かれます。滑らかに表示・非表示されるフェードアニメーションがとても美しいですね。

背景にはオーバーレイがかかるのでモーダルボックスへの注目度もバッチリです。表示されたモーダルボックスは、「Close」ボタンか右上にあるバツ印、もしくはキーボードのescキーやモーダル外をクリックすることで閉じることができます。

余計な装飾もなくシンプルでスッキリしたモーダルボックスといった印象です。レスポンシブにも対応していることから、スマホなどのモバイル端末からの閲覧にも最適ですね。

オプションには、top、maxWidth、centered、fadeDurationという項目が用意されています。各デフォルト値は、topが60、maxWidthが400、centeredがfalse、fadeDurationが600です。

Modelo

関連記事

  1. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  2. Docked Link jQuery Plugin
  3. Parallax Slider with jQuery
  4. simpler-sidebar

    JavaScript

    シンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」

    simpler-sidebarは、シンプルでスタイリッシュなサイドナビ…

  5. Rebox

    JavaScript

    レスポンシブ対応の軽量なLightbox風jQueryプラグイン「Rebox」

    ReboxというjQueryプラグインを使えば、レスポンシブに対応した…

  6. Jquery Line Progress Bar

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP