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

02月 2009年

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

ishida 17:35 PM

イメージ

こんばんは、先日右のみパーマをかけた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を使用している場合にデフォルトで入れておくのもよさそうな感じですね。
お試しあれ。

PopUpWindow ダウンロード

ツール・アプリケーション

トラックバック

このエントリーのトラックバックURL: http://c-brains.jp/cgi-bin/mt/###/1819
###はmt-tb.cgiに変更してください。

設置方法に記述されている内容だけですとポップアップはしません。

後settings要素の指定なんですが、どこをどのように指定したらどうなるのか教えて頂けないでしょうか？

通りすがり | 2009年07月08日 17:39

こんにちわ
中尾恵子です私も横浜ですよ。
そして初心者です。
ご質問ですが、4点ほどあります。
popup_windowでクールなデザインを探していると
Highslide（HTML content）や　prototype-window
Interface elements （John Resig氏）window.html
が私のお気入りです。
これに準ずるようなpopup_windowご存じないいですか？
なかでもInterface elements（window.html）を
使いたく勉強してますが....
わかりかねいます～！
横浜で気楽にソースを習えたり、教えて頂けたりできるところありませんか？？
どうしても教えて頂きたいのですが...
作者やネットに質問もできないし..困っています。
そんな親切なフォーラムや横浜で、ご指導頂ける方・場所
ありませんか？