この記事は旧ブログ(amuns:blog)の記事です。

jQueryを使って、海外製の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;

モーダルウィンドウが間単に組み込めるので、様々な場面で有効に使えそうですね。