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

    テキストに滑らかに動くアニメーションをつけることができるjQueryプラグイン「animateTex…

    テキストに滑らかに動くかっこいいアニメーションをつけることができるjQ…

  2. jQuery Pretty Dropdowns
  3. JavaScript

    カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

    TinyTipはカスタマイズしやすいツールチップを実装することができる…

  4. Smooth Scroll behavior polyfill
  5. no-image
  6. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP