JavaScript

シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」

portBoxというjQueryプラグインを使えばシンプルで軽量なLightBox系のモーダルウィンドウを簡単に実装することができます。見た目もスッキリとしていて洗練されたデザインですね。Webサイト上の色んな場所に使用することができるので覚えておきたいプラグインかと思います。以下は使い方です。

[ads_center]

portBoxの使い方

portBox

portBox

目的の要素をクリックすると、フワっとフェードで表示されます。情報量が多いサイトなんかに使用すれば見た目もスッキリしそうですね。

以下はhead内に読み込むファイルになります。

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.portBox.slimscroll.min.js"></script>
<link href="css/portBox.css" rel="stylesheet" />

基本的なマークアップです。

<a href="#" data-display="myBox">サンプル</a>
<div id="myBox" class="portBox">
<!-- ここにコンテンツ -->
</div>

オプション

portBoxにはオプションが用意されています。オプションを使用することでデフォルトに設定されている値を変更することができます。HTMLに追加していく形で記述します。

<a href="#" data-display="myBox" data-animation="fade" data-animationspeed="200" data-closeBGclick="true">サンプル</a>

使用できる項目は以下の通りです。

  • data-animation(デフォルトはfade)
  • data-animationspeed(デフォルトは200)
  • data-closeBGclick(デフォルトはtrue)

data-animationに指定できる値はたくさんあるので、色々と使ってみて自分の好きなアニメーションを選択していくのがよさそうです。

画面内にバランスよく整列されたギャラリーを実装できるjQueryプラグイン「Balanced Gallery」前のページ

パララックス効果がとても素敵なjQueryスライダー「Parallax Slider with jQuery」次のページParallax Slider with jQuery

関連記事

  1. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  2. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

  3. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  4. SpriteSpin

    JavaScript

    タッチにも対応した360度ビューを実装できるjQueryプラグイン「SpriteSpin」

    SpriteSpinはプロダクトページなどで役立つ、360度ビューを実…

  5. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

  6. jquery-bubble-text

    JavaScript

    テキストがアニメーションで切り替わっていく「jquery-bubble-text」

    jquery-bubble-textは、テキストが次々に切り替わってい…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP