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. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  2. Inspiration for Grid Loading Animations
  3. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  4. bcralnit.js
  5. jquery.adaptive-backgrounds.js
  6. Frappe Charts

    JavaScript

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

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

最近の記事

  1. ミノン メン 薬用全身シャンプー
  2. ウェアラブルヒーター ネック

アーカイブ

PAGE TOP