jQueryでポップアップ(モーダルウィンドウ)「prettyPopin.js」
jQueryを使って、ポップアップウィンドウを作ってみました。
javascriptで「window.showModalDialog」がありますが、色々と不便な場合があります。(ただ開くだけならいいんですが)
すぐに使用できるように、実用的なサンプルを用意しました。
モジュール
•jQuery: 1.3.2
jQueryダウンロード
•prettyPopin.js:1.3
prettyPopinダウンロード
動作環境
私は以下の環境で動作確認しました。
•IE8
•Firefox3.0
•Opera9.64
•Google Chrome2.0
•Safari4.0
※prettyPopinのサイトにも詳細はあります。
サンプル
まずは以下のサンプルページを見てみましょう。
今回はポップアップウィンドウの中で遷移をするように、ダミーのメール送信フォームを作成しました。(実際はメールを送信しませんので遠慮せず試してみてください)
ソース
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もおしゃれですね。
番外編
画像の大きさが決まっているので、更に大きくしたい場合や、色を変える場合には以下です。ボタンを画像にしたりできます。
<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;
モーダルウィンドウが間単に組み込めるので、様々な場面で有効に使えそうですね。
関連記事:
