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

関連記事

  1. jQuery UI Month Picker Plugin
  2. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  3. no-image

    JavaScript

    トップに素早く戻れるボタンを実装できるjQueryプラグイン「TopButton」

    TopButtonはボタンをクリックするだけで画面トップに素早く戻れる…

  4. Air Datepicker

    JavaScript

    軽量でクロスブラウザ、モダンブラウザに対応した「Air Datepicker」

    Air Datepickerは軽量でクロスブラウザ、モダンブラウザに対…

  5. markerPen

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

  6. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

コメント

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

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

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP