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. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  2. Recursive Hover Nav
  3. Dynamic Table

    JavaScript

    スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

    Dynamic Tableはスプレッドシートのような高機能なテーブルを…

  4. Pongstagr.am

    JavaScript

    自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

    Pongstagr.amは自分のインスタグラムの画像をWebサイトに表…

  5. js-offcanvas

    JavaScript

    上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

    js-offcanvasは、上下左右にオフキャンバスのナビゲーションを…

  6. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP