portBoxというjQueryプラグインを使えばシンプルで軽量なLightBox系のモーダルウィンドウを簡単に実装することができます。見た目もスッキリとしていて洗練されたデザインですね。Webサイト上の色んな場所に使用することができるので覚えておきたいプラグインかと思います。以下は使い方です。
[ads_center]
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に指定できる値はたくさんあるので、色々と使ってみて自分の好きなアニメーションを選択していくのがよさそうです。
