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. TabTab.js

    JavaScript

    アニメーション付きで切り替わるjQueryのタブプラグイン「TabTab.js」

    TabTab.jsは素敵なアニメーション付きのタブコンテンツを実装する…

  2. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

  3. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  4. PreViewTube.js
  5. Bootstrap Dropdown Hover
  6. Material Design Responsive Table

コメント

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

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

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP