no-image

JavaScript

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

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

Modelo

デモ

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

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

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

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

Modelo

no-imageツールチップを活用したフィードバックソリューション「Modern Customer Feedback Plugin」前のページ

さまざまなSVGパターンによるCSSプログレスバー「Bars」次のページno-image

最近の記事

  1. ホワイトチョコマカダミアドーナツ
  2. エッグペペ
  3. ダークチョコレート
  4. 朝のコーヒー
  5. ザンビア
PAGE TOP