jQueryで簡単にポップアップが出来る「jQuery PopUpWinodow」の使い方

jQueryを使ったポップアッププラグインの使い方を教える必要があったのですが、他にも知らない人がいるかもなのでブログでご紹介。

このスクリプトを実行すると簡単にポップアップウインドウが作れるようになりますよ。
ウインドウのサイズや位置などもパラメータで指定するだけです。

※モーダルウインドウでは無く、新しいウインドウを開くポップアップの方です

使い方

1.jQueryをダウンロード
まずは、jQueryが必要になります。公式サイトから最新版をダウンロードしてきます。

2.プラグインをダウンロード

次にプラグインのサイトからjquery.popupwindow.jsをダウンロードします。

2.JSを読み込み

ダウンロードしたjQueryとpopupwindow.jsを読み込みます。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.popupwindow.js"></script>

3.プラグインを有効にします。

以下のコードをHEAD内のjquery.popupwindow.jsを読み込んだ後ろに記述してください。

$(function()
{
	$(".popupwindow").popupwindow();
});

4.リンクを設定

ポップアップさせたいリンクに「 class=”popupwindow”」を設定します。
以上で設定は完了です。

リンクの書き方

デフォルトの場合

<a href="http://example.com/" class="popupwindow">Example 1</a>

rel要素にオプション　その１

<a href="http://example.com/" class="popupwindow" rel="height:400,width:400">Example 1</a>

縦:400,横:400で開きます。

rel要素にオプション　その２

<a href="http://www.example.com/" class="popupwindow" rel="height:550,width:750,toolbar:1,scrollbars:1,
status:1,resizable:0,left:50,top:100">Example 2</a>

以下の設定が追加されています。

• width:550px、height:750pxで開く
• ツールバーを使用する
• スクロールバーを表示する
• ステータスバーを使用する
• リサイズ不可
• 左から50px,上から100px

あらかじめ定義した設定を利用する

あらかじめ定義した設定を利用します。複数ページで同内容を使用する場合に便利です。

JS

var profiles =
{
 
	window800:
	{
		height:800,
		width:800,
		status:1
	},
 
};
$(function()
{
	$(".popupwindow").popupwindow(profiles);
});

HTML

Example 1

その他の例

JS

var profiles =
{
 
	window200:
	{
		height:200,
		width:200,
		status:1,
		resizable:0
	},
 
};
$(function()
{
	$(".popupwindow").popupwindow(profiles);
});

HTML

Example 2

オプションで設定可能な値

オプションで設定可能な値です。以下の値を参考に。数値は適時変更してください。

height:600, // 高さを指定します。
width:600, // 横幅を指定します。
toolbar:0, // ツールバーを表示させるかどうかを指定します。1：表示、0：非表示.
scrollbars:0, // スクロールバーを表示させるかどうかを指定します：1：表示、0：非表示.
status:0, // ステータスバーを表示させるかどうかを指定します：1：表示、0：非表示.
resizable:1, // リサイズ可能にするかどうかを指定します。1：リサイズ可能、0：リサイズ不可
left:0, // 画面の左から何pxに表示するかを指定します。
top:0, // 画面のTOPから何pxに表示するかを指定します。
center:0, // センターに表示するかどうかを指定します。1 ：センター、0：指定なし. topとleftよりもこちらが優先されます。
createnew:1 // 新しいウインドウを開くかどうかを指定します。1：新しいウインドウ、0：同じウインドウ.

以上、jQueryで簡単にポップアップが出来る「jQuery PopUpWinodow」の使い方でした。