ページを簡単にjQueryでポップアップ! jQuery PopUpWinodow

ページを簡単にjQueryでポップアップ! jQuery PopUpWinodow

イメージ

こんばんは、先日右のみパーマをかけたishidaです。

最近はページや画像をlightbox系で表示する機会が多くなってきましたが、ポップアップで表示することも少なくありません。

今回ご紹介するのは、jQueryを使ったポップアッププラグイン jquery.popupwindow.js です。

設置方法

配布ページよりデータをダウンロードし、ポップアップを利用したいhtmlのhead要素などでファイルを読み込みます。

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

表示する部分は以下です。

<a href="DUMMY.html" class="popupwindow">ポップアップ</a>

a要素のclass属性に「popupwindow」を設定します。

ポップアップ時の各項目(サイズ、表示位置やスクロールバーの有無など)は、jquery.popupwindow.jsファイル内の以下の部分を変更することにより設定できます。

settings = {
	height:600,
	width:600,
	toolbar:0,
	scrollbars:0,
	status:0,
	resizable:1,
	left:0,
	top:0,
	center:0,
	createnew:1,
	location:0,
	menubar:0
};

またsettingsによる設定だけでなく、複数の設定パターンをプロファイルとして用意し、a要素のrel属性にプロファイル名を付与することで、表示を切り分けることも可能です。

サイトにjQueryを使用している場合にデフォルトで入れておくのもよさそうな感じですね。
お試しあれ。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ