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. no-image
  2. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

  3. PWS Tabs jQuery Plugin
  4. jQuery Context Menu

    JavaScript

    軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」

    jQuery Context Menuは、軽量でシンプルなコンテキスト…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの超基本的なアニメーションを試してみる

    jQueryの基本的なアニメーションを試してみました。やっぱりアニメー…

  6. multi.js

    JavaScript

    検索機能がついたセレクトボックスを実装できる「multi.js」

    multi.jsは検索機能がついた使いやすいユーザーフレンドリーなセレ…

コメント

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

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP