Uglipop.js

JavaScript

軽量でミニマルなモーダルボックスを実装できる「Uglipop.js」

Uglipop.jsは軽量でミニマル、カスタマイズ性にも優れたモーダルボックスを実装することができます。divやプレーンなHTML要素、Iframeや画像などをシンプルに挿入することができるのでとても便利です。

Uglipop.jsの使い方

Uglipop.jsの実際のデモは以下からどうぞ。

Uglipop.js

デモ

使い方はこんな感じで、sourceにhtmlを指定した場合はcontentに直接HTMLを記述していくことができます。

uglipop({
    class:'put',
    source:'html',
    content:'<div>サンプルテキスト</div>'});}

classの部分に任意のクラス名を設定して自分で好きなようにスタイルをカスタマイズもすることも可能です。

他にも画像を指定する時には以下のように記述すればOKです。Lightboxのように画像を表示させることができます。

uglipop({
    source:'html',
    content:'<img src="画像パス"></img>'});}

Uglipop.js

関連記事

  1. JavaScript

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「jQuery Burn」

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「…

  2. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

  3. jQuery Scrollify

    JavaScript

    セクションごとにスクロールしてくれる「jQuery Scrollify」

    jQuery Scrollifyはセクションごとにスクロールしてくれる…

  4. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  5. JavaScript

    複数カラムをレスポンシブに対応させるjQueryプラグイン「jquery.columns」

    複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「…

  6. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP