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. Sliiide

    JavaScript

    シンプルなスライディングメニューを実装できる「Sliiide」

    Sliiideはシンプルなスライディングメニューを実装することができる…

  2. JavaScript

    サムネイルをクリックして拡大画像が見れるレスポンシブ対応のjQuery画像ギャラリー「Superbo…

    綺麗に並んだサムネイル画像をクリックして拡大画像を見ることができるjQ…

  3. Animated Weather Cards

    JavaScript

    シンプルでお洒落なアニメーションつき天気予報「Animated Weather Cards」

    お洒落なアニメーションがついた天気予報カード「Animated Wea…

  4. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

  5. Page Stack Navigation

    JavaScript

    ページをスタッキングできる「Page Stack Navigation」

    Page Stack Navigationはページをスタッキングできる…

  6. PWS Tabs jQuery Plugin

最近の記事

  1. Anker PowerHouse 200

アーカイブ

PAGE TOP