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. JQuery lightSlider

    JavaScript

    軽量でレスポンシブなサムネイルナビ付きのスライダー「JQuery lightSlider」

    JQuery lightSliderは軽量でレスポンシブに対応したサム…

  2. Ace Responsive Menu
  3. jQuery googleslides
  4. JavaScript

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

  5. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

  6. Reframe.js

    JavaScript

    特定の要素をレスポンシブ化してくれる「Reframe.js」

    Reframe.jsはレスポンシブに対応していない特定の要素をレスポン…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP