今日の人気記事

  1. 複数のポップアップを重ねて表示「dialog」
  2. Tableカラム(列)にソート機能を追加「Tablesorter」
  3. 左右にスクロールできるタブメニュー「ScrollTabs」
  4. 簡単にアラートを実装できる「Notify」
  5. Windows8のようなカラフルなタイルを実装「smarTiles」

表示する位置座標を指定できるポップアップ「bPopup」

スポンサーリンク

表示する位置座標を指定できるポップアップを実装するプラグイン「bPopup」を紹介します。

jQueryプラグイン「bPopup」

このプラグインを使えば、クリックなどのさまざまなアクションでぶわっ!とアニメ効果で表示するポップアップ(モーダル)ウィンドウを簡単に実装することができます。

また、ポップアップを表示する位置座標や jQuery Easing plugin を使ったアニメーションにも対応しています。

スポンサーリンク

それではデモページをご覧ください。

「bPopup」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Shapeshift のデモでーす。">
<title>Shapeshift - jQueryプラグイン</title>
<style>
#demo-popup {
  display: none;
  border: solid 1px blue;
  width: 300px;
  height: 250px;
}
</style>
</head>
<body>
<h1>Shapeshift のデモ。</h1>

<button id="demo-button">クリック!</button>
<div id="demo-popup">ポップアップ!</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.bpopup.js"></script>
<script>
$(document).ready(function() {
  $('#demo-button').bind('click', function(e) {
    e.preventDefault();
    $('#demo-popup').bPopup({
      follow: [false, false],
      position: [200, 0],
    });
  });
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)