jQueryでポップアップ(モーダルウィンドウ)「prettyPopin.js」

• jQuery: 1.3.2
  jQueryダウンロード
• prettyPopin.js:1.3
  prettyPopinダウンロード

私は以下の環境で動作確認しました。

• IE8
• Firefox3.0
• Opera9.64
• Google Chrome2.0
• Safari4.0

　※prettyPopinのサイトにも詳細はあります。


まずは以下のサンプルページを見てみましょう。
今回はポップアップウィンドウの中で遷移をするように、ダミーのメール送信フォームを作成しました。(実際はメールを送信しませんので遠慮せず試してみてください)

サンプルページ1


jQueryとprettyPopin.jsを配置し、以下のように宣言します。
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="../css/prettyPopin.css" type="text/css" media="screen" charset="utf-8" /> <script src="../js/jquery.prettyPopin.js" type="text/javascript" charset="utf-8"></script>
Javascriptに以下のように書き開く動作を指定できます。(例です)
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPopin']").prettyPopin({ modal : true, width : 400, height: 400, opacity: 0.5, animationSpeed: '0', followScroll: false, loader_path: '/sample/images/prettyPopin/loader.gif', callback: function(){ alert('[ダミーです] メール送信が完了しました。\nこのようにウィンドウを閉じた後の処理も可能です。'); } }); }); </script>
呼び出したいリンク先を指定します。(今回はPHPファイルにしました) <a href="test.php" rel="prettyPopin">(サンプルです)メール送信ポップアップウィンドウ</a>
サンプルのとおり、Submitボタンを押してもそのウィンドウで処理が進みます。
送信時のLoadingもおしゃれですね。


画像の大きさが決まっているので、更に大きくしたい場合や、色を変える場合には以下です。 ボタンを画像にしたりできます。

サンプルページ2
<a href="test.php" rel="prettyPopin"><img src="/sample/images/samplebutton1.gif" border="0" /></a>
まずsamplebutton1.gifを作成します。(ボタン画像)
次に背景画像のpopinRight.gifを編集します。(prettyPopinに標準で入っている画像)
今回は50px×50px程度の画像にしました。

最後にprettyPopin.cssの以下の部分を background: url(../images/prettyPopin/popinRight.gif) bottom right no-repeat; 以下に変更します。 background: url(../images/prettyPopin/popinRight.gif) repeat;
モーダルウィンドウが間単に組み込めるので、様々な場面で有効に使えそうですね。