表示する位置座標を指定できるポップアップ「bPopup」
当ページのリンクには広告が含まれています。
スポンサーリンク
表示する位置座標を指定できるポップアップを実装するプラグイン「bPopup」を紹介します。
jQueryプラグイン「bPopup」
このプラグインを使えば、クリックなどのさまざまなアクションでぶわっ！とアニメ効果で表示するポップアップ（モーダル）ウィンドウを簡単に実装することができます。
また、ポップアップを表示する位置座標や jQuery Easing plugin を使ったアニメーションにも対応しています。
スポンサーリンク
それではデモページをご覧ください。
デモのソース（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>
スポンサーリンク