- jQuery popin solution – prettyPopin – by Stephane Caron

jQueryプラグイン「prettyPopin」を使うと簡単にポップアップが実装できます。

サンプルはこちら(別ウィンドウで開きます)。

使い方を紹介します。

1. 「jquery.js」と「prettyPopin.js」の読み込み

<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery.prettyPopin.js" charset="utf-8"></script>
<link rel="stylesheet" href="prettyPopin.css" type="text/css" media="screen" charset="utf-8" />

※例では、「prettyPopin」に添付されているCSSファイルも読み込んでいます。

prettyPopin.jsのダウンロードはこちら

jquery.jsのダウンロードはこちら

2. ポップアップする識別名を設定

例では、aタグのrel属性の値に「prettyPopin」と設定しました。

<a href="ajax/regular.html" rel="prettyPopin">ポップアップ！</a>

3. prettyPopin()の呼び出し

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
  $("a[rel^='prettyPopin']").prettyPopin({width: 550,followScroll:false});
});
</script>

完了です。

設定等の詳細は「jQuery popin solution – prettyPopin – by Stephane Caron」をご覧下さい。