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

Lightroomで写真の縦横の向きを変更Lightroomのサムネイル一覧から写真の縦横の向きを変更するやり方前のページ

いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」次のページgridslide.js

関連記事

  1. ptrLight

    JavaScript

    モバイル用のリフレッシュインジケーターを実装できる「ptrLight」

    ptrLightはモバイル用のリフレッシュインジケーターを実装すること…

  2. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

  3. JavaScript

    レスポンシブでカスタマイズ性に優れたカルーセルを実装できるjQueryプラグイン「slick」

    slickというjQueryプラグインを使えば、レスポンシブでカスタマ…

  4. no-image
  5. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  6. JavaScript

    立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

    立体的なナビゲーション表示を実装できるjQueryプラグイン「Box …

最近の記事

  1. EOS RP
  2. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  3. スターバックス ハシエンダ アルサシア
  4. イングリッシュマフィン

アーカイブ

PAGE TOP