CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成!

24

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を使用している場合にデフォルトで入れておくのもよさそうな感じですね。
お試しあれ。

バシャログスタッフによるWebサイト制作サービス

トラックバック

このエントリーのトラックバック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)を
使いたく勉強してますが....
わかりかねいます~!
横浜で気楽にソースを習えたり、教えて頂けたりできるところありませんか??
どうしても教えて頂きたいのですが...
作者やネットに質問もできないし..困っています。
そんな親切なフォーラムや横浜で、ご指導頂ける方・場所
ありませんか?

>通りすがり さん

コメントありがとうございます。
jquery.jsについては別途ダウンロードされたでしょうか?
してない場合は、
<script src="jquery.js" type="text/javascript"></script>
の部分を以下に変更していただければ動作すると思います。

<script type="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script>

また詳細の設定につきましては、
jquery.popupwindow.jsのファイル内にコメントが書かれておりますので
そちらを参考にしていただければと思います。

> 中尾さん

コメントありがとうございます。
LightBox系の紹介記事はいろいろあると思いますが以下のような記事がありましたので参考にしていただければと思います。

■LightBox系スクリプト 16選
http://likealunatic.jp/2009/06/24_lightbox16.php

>横浜で気楽にソースを習えたり、教えて頂けたりできるところありませんか??

真剣に学ばれるのであれば、WEB系のスクールやセミナーに通われるのがイイかと思います。

>そんな親切なフォーラムや横浜で、ご指導頂ける方・場所
ありませんか?

mixiの初心者向けコミュはがいろいろありますので以下のようなものに参加してみたらいかかでしょうか。

■WEBデザイン 初心者講座
http://mixi.jp/view_community.pl?id=721317
■Webデザイナーのたまひよさん
http://mixi.jp/view_community.pl?id=9371
などなど。

コメントを投稿

ページの先頭へ

POPULAR TAGS
  • バシャログスタッフによるWebサイト制作サービス

ARCHIVE

特集

  • ステップアップ!CakePHP
  • 作って学ぶjQuery