フローティングポップアップウィンドウを簡単に実装するJavascript

カテゴリ:Javascript小技 2008年12月31日 01:20

更新履歴

[10/04/10]
リサイズ可能なウィンドウを表示した場合に、縮小すると再現なく小さくなってしまう問題を修正しました。
これに伴って、versionを1.8.1に変更しています。
[09/10/08]
yasuさんのご指摘で、IE6 でウィンドウ縮小時に白い余白が残ってしまう問題を修正しました。
これに伴って、version が 1.8 に変更されています。
[09/09/04]
prototype.js などの、$関数を使うライブラリと競合しないよう修正しました。
これに伴い、version が 1.7 に変更されています。
[09/04/21]
IE6 で、ウィンドウが select 要素の下に潜り込んでしまう問題を修正しました。
これに伴い、version が 1.6 に変更されています。リサイズ部分の処理にエラーがあったため、それを修正しました。ver1.6 をダウンロードされた方で、リサイズがうまく動かないって人はもう一度ダウンロードし直してください(;´Д`)
[09/03/31]
少し前の version のファイルに指し換わってしまっていたため、最新のものをアップしなおしました。
Opera や IE7 での iframe の表示がおかしい場合は新しいものをダウンロードしなおしてみてください。
[09/02/12]
JS 本体について、zip 内に圧縮したものと通常のもの(_src がついたもの)がありますが、圧縮したほうについては、ある環境では IE で表示位置がずれるという不具合がありました。通常のものを使用した場合は問題が出ていませんので、もしそういった問題が発生した場合は "_src" が付いているほうの JS ファイルを利用してみてください。
[09/01/02]
Opera,IE7 で iframe の高さが正常に表示されない不具合を修正。

フローティングポップアップウィンドウを表示するスクリプトを作ってみました。
「はい」や「いいえ」などを押したときに色々と処理をさせたかったので自作しました。
JavaScriptのalert関数を使うとどうしても味気ないものになってしまうので、
デザインされた alert や confirm を使いたい場合に使ってみてください。

また、表示できる内容はテキスト、DOM ノード、iframe、画像となっています。
最大化・最小化ボタンをつけたり、閉じるボタンを非表示にしたり、
また、複数のウィンドウを開かせないようにモーダルとしてウィンドウを開くこともできます。

そしてこれらの機能はすべて、同時に設定することができます。
設定できるパラメータについては以下に一覧表示しています。

フローティングポップアップウィンドウ デモ

▼EntryMore▼

構文(Syntax)

第一引数にコンテンツを指定します。
オプションになにも指定しない場合は第一引数を文字列としてアラート表示します。
第二引数にはオブジェクトとして引数を渡します。渡せる引数の一覧は以下の通りです。

オプション

オプション名 説明
type パラメータ:alert, caution, warning, information, confirm, inline, iframe, image

表示タイプを指定します。
alert は JavaScript の「alert」関数と同等です。confirm は JavaScript の「confirm」関数と同等です。
それぞれのボタンを押したときに実行させる関数を設定する場合は、下記の YES,NO に関数を設定してください。
iframe は指定された URL を、inline は指定された DOM ノードを表示します。
※デフォルト値は「alert」です。
title パラメータ:任意の文字列

ウィンドウにタイトルを表示します。
width パラメータ:CSS で指定できる任意の値

幅を設定します。
※デフォルト値は「auto」です。
height CSS で指定できる任意の値
CSS で指定できる値を指定できます。
※デフォルト値は「auto」です。
modal パラメータ:true,false

モーダル表示の設定をします。
モーダル表示をすると、ポップアップウィンドウの下に
カバー用のDIVを生成して、他の操作をさせないようにできます。
※デフォルト値は「false」です。
effect パラメータ:slow, normal, fast(任意の数字(ミリ秒))

フェードイン・アウトのエフェクトをつけてウィンドウを表示します。
設定は、jQuery のパラメータと同じで、定数か、ミリ秒を数値で指定します。
nomove パラメータ:true,false

ポップアップしたウィンドウを移動できるかどうかを指定します。
※デフォルト値は「false」です。
windowmode パラメータ:true,false

ウィンドウモードを指定します。
true の場合、最小化・最大化ボタンを表示します。
※デフォルト値は「false」です。
close パラメータ:true,false

close ボタンを非表示にします。
必ず「はい」「いいえ」などの処理を実行してもらいたいときなどに使用します。
※デフォルト値は「true」です。
resize パラメータ:true,false

リサイズ可能なボックスを生成します。
resize に true を指定すると、ボックスの右下にドラッグ可能なマークが現れ、 それをドラッグすることでリサイズが可能になります。
※デフォルト値は「false」です。
varName 変数として使える任意の文字列

生成したボックスの参照先としての変数を指定できます。
ここで指定した文字列をwindowオブジェクトの変数として登録します。
登録された変数には後で他の関数からアクセスできます。
close(), setYESEND( function ), setNOEND( function ) などの外部関数が準備されています。
指定しない場合は「pWindow+通し番号」の変数が割り当てられます。
YES パラメータ:関数

type に「alert」か「confirm」を指定した際に、「はい」ボタンを押されたときに実行する関数を設定します。
無名関数を指定するか、すでに定義された関数を設定してください。
NO パラメータ:関数

type に「confirm」を指定した際に、「いいえ」ボタンを押されたときに実行する関数を設定します。
無名関数を指定するか、すでに定義された関数を設定してください。

変数経由で実行できる関数

関数名 説明
close() 表示したウィンドウを閉じます。
YES() $pop 宣言時に YES 関数に設定したものを実行し、実行後ウィンドウを閉じます。
NO() type に confirm を指定していて、かつ $pop 宣言時に NO 関数に設定していた場合、それを実行し、実行後ウィンドウを閉じます。

この記事のカテゴリー一覧を見る⇒Javascript小技

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

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/108

コメント

1 - masayuki さん

えどさん、はじめまして。n今製作中の私のウェブサイトにえどさんのPopupWindowの実装を試みているのですが、どうしても以下のことが分かりません。nFirefoxはOKなのですが、IEだとWindowが画面の下のほうに来てしまいます。nWindowの中にテキスト、画像、表、リンクを表示したいのですが、可能ですか? もし可能なら具体的にはどうすればいいのでしょう?nそれとカスタマイズやライセンスの規約などはどうなっているのでしょう?nまったく初歩的な質問だと思いますが、お時間が空いたときにアドバイスをいただけたらありがだいです。ちなみに私はjsはほとんどだめで、cssは少々です。よろしくお願いします。

2009年1月 8日 13:04

2 - えど Author Profile Pageさん

>>1 - masayuki さんえぇと、もしその問題のページを見ることができるのでしたらnURLを教えて頂けると早く解決するかと思います。nこちらでIE6、7をチェックした限りでは特に問題が起きていませんが、nIEには互換モードや準拠モードなど、nいくつかの要因が重なって想定外の状態になることはままあるので、nもしかしたらそういった原因が関係しているかもしれません。n(なので、実際に見ないとなんとも言えない、というのが正直なところです・・)n下のほうに表示される、とありますが、n表示位置だけの問題でしょうか?nたとえば、ドラッグやリサイズ、表示コンテンツなどにおいては特に問題ありませんか?nもし表示位置以外問題がないのであれば、n上でも書いたように、モードの違いで取得されるべき値に誤差が出ているのかもしれません。nそれからライセンスやカスタマイズについてですが、n勉強用として作ったものですので、特にライセンスなどは考えていません。nなのでカスタマイズも自由に行っていただいてかまいません。n(そのためにデザイン用のPSDファイルも同梱してあります)nコンテンツとして表や画像を、ということですが、n単にURLなどを指定して画像を表示するだけでしたら可能ですが、n画像、リンク、表などがまとまって表示されることを想定されているのだとすると簡単に実装するにはiframeがいいかな、と思います。nあとは、JSを駆使しないといけませんが、nJSで生成したものをコンテンツに含めることもできます。nなので、JSでコンテンツを作成して表示する、という方法も考えられますが、nJSがそれほど詳しくないとのことなので、n若干むずかしいかもしれません・・。

2009年1月 8日 14:10

3 - masayuki さん

えどさん、さっそくのお返事ありがとうございます。n何か私にはむずかしそうですね。nサイトはここですので、ちょっとのぞいてみて下さい。nhttp://www.japan-blue.com/women's.htmlではよろしくお願いいたします。

2009年1月 8日 16:05

4 - えど Author Profile Pageさん

>>3 - masayuki さん確かに変な場所に表示されますね・・。nしかも、IE6の場合サイズがやたら大きくなりますね。nちょっとまだ詳しく見ていないのでわかりませんが、n$popに指定しているheightをなくしても正常に表示されないでしょうか?nheightは自動で伸びるので、特に指定しなくても大丈夫です。

2009年1月 8日 16:19

5 - masayuki さん

ご指摘のようにやってみましたが変わりないみたいです。n私のcssがごちゃごちゃしているので、ちょっと調べてみます。nまわりにまだIE6を使っている人が何人かいるのですが、同じようにボックスがやたらと長くボーダーが未表示になってると言ってました。nえどさんのサイトのサンプルはきれいに表示されるとのことなので、やはりこっちに問題がありそうです。nお忙しいのにいろいろありがとうございます。   

2009年1月 8日 23:43

6 - 素敵 さん

すばらしい!使わせていただきます!!

2009年3月24日 11:40

7 - えど Author Profile Pageさん

>>素敵さんコメントありがとうございます!(*'-')ぜひ使ってやってください♪

2009年3月24日 12:10

8 - アクア さん

メッチャいいですねー!!n使わせて頂きますm(__)mでも、なぜかcloseをfalseにしてもtrueにしても閉じるボタンが表示されます。nクリックしても動作しませんが・・・それと最大化ボタンも常に表示されてます。n既存サイトに組み込んだので、スタイルシートあたりが意地悪してるのかな?

2009年4月 2日 10:44

9 - えど Author Profile Pageさん

>>8 - アクア さんコメントありがとうございます(*'-')うまく動かないですか・・?(;´Д`)ダウンロードしたデモではちゃんと動いているので、nもしかしたらそちらのサイトのなにかが悪さしているのかもしれません。。nすでにアップされているのであれば、nURLなんかをメールでいただければちょっと確認します。

2009年4月 2日 11:09

10 - チャッキー さん

とても素晴らしいモノなので是非、使わせて頂きたく思い、組み込んでみたのですが…試しに「500x250のアラートボックスを表示」をやってみたのですが、BODY内のレイアウトが崩れてしまいました。(横に余分なスペースが出来てしまいます)nBODY全体はテーブルで横800ピクセルにしています。nどうも、読み込んでいるスタイルシートが関係してる様なのですが、どこを弄れば良いか判らず質問させて頂きました。n宜しくお願い致します。

2009年4月20日 12:11

11 - えど Author Profile Pageさん

>>10 - チャッキーさんコメントありがとうございます!n状況の確認なんですが、レイアウトが崩れた、というのはポップアップウィンドウ用の CSS を読み込んだら、ということでしょうか?nそれとも、ポップアップウィンドウを表示させるとレイアウトが崩れる、ということでしょうか?n前者の場合であれば、もしかしたら読み込んだ CSS ファイルが影響しているかもしれません。nというのも、ウィンドウ部分を実現するために table を利用しているため、nテーブルレイアウトの場合、場合によっては読み込んだ CSS が悪さをしてしまうかもしれません。nダウンロードした popupwindow.css 内に記述されているID や class で、ご自身のサイトで使っているものと重複しているものはありませんか?nもし重複していたらそれが原因かもしれません。(いちおう、重複しないように注意したつもりではいますが、可能性は 0 ではないので・・)nそれから、もしレイアウトが崩れるサイトの URL をメールなどで送っていただければ原因を調べたいと思います。( Mail: css.eblog@gmail.com )

2009年4月20日 13:32

12 - アクア さん

とっても便利で使わせて頂いております!nただIE6だけ、selectボックスがポップアップより前面に表示されてしまいます。。nイロイロ調べたらIE6のバグというか仕様との事で、iframeを使ってselectより前に被せれば解決みたいな事を書いているんですが、なにぶん素人でどうすればいいのかわかりません?nもしご存じで解決策がありましたら是非ご教授下さいm(__)mお時間のある時で結構ですので宜しくお願い致します。

2009年4月20日 15:04

13 - チャッキー さん

えどさん。早速のご回答ありがとうございます。n私の症状としましては前者です。ポップアップウィンドウを開く前に崩れてます。n…が、良く見ると全体では無く部分的に崩れてるんですよ。nなので、テーブルで幾つか分割してますので、その辺りが関係してるのかも?と思い、調べてます。nIDやCLASS名は特に重複してるモノは無いです。nちなみに、別件なんですが…。n既存の"iframe"内に組み込んでみたのですが、案の定、ポップアップウィンドウは"iframe"内にしか表示されませんでした。nこれを、"iframe"外に表示させる事は可能でしょうか?nこの方法で解決出来れば一番良いのですが。nターゲット指定では上手くいきませんでしたので、何か得策は無いか?と考えております。n度々、すみませんが宜しくお願い致します。

2009年4月20日 20:14

14 - チャッキー さん

えどさん。nレイアウトが崩れる原因は、n単に私の知識不足によるもので、sample_layout.cssも一緒に組み込んでいたのが原因でした。nお陰様でまたひとつ勉強になりました。ありがとうございます。

2009年4月21日 11:23

15 - えど Author Profile Pageさん

>>14 - チャッキーさんなるほど、サンプル用のやつも読み込んでたんですね^^;明記しておかないと分かりづらいですよね(;´Д`)でも問題が解決したようでよかったです!

2009年4月21日 11:29

16 - えど Author Profile Pageさん

>>12 - アクアさんそうなんですよね・・。select ボックスが上にきちゃうんです・・。nもし、表示中他の操作を無効化するのであれば一時的に select ボックスを非表示にして、とかも考えたんですが、n場合によっては同時に表示したい場合もあるので、却下したんです・・。n対策があるか、ちょっと調べてみますね!

2009年4月21日 11:33

17 - えど Author Profile Pageさん

>>13 - チャッキー さん別件のやつですが、iframe で表示しているのがnドメインが同じコンテンツを表示しているのであれば、niframe の親側にこのスクリプトと CSS を読み込ませてからiframe 側から、親のスクリプトを呼ぶことで解決できます。nvar obj = new parent.$pop(...);でウィンドウを表示することができると思います。nただ、もし iframe 内のドメインが異なる場合はセキュリティの観点から、iframe から親にはアクセスできないので無理です・・。n

2009年4月21日 11:39

18 - えど Author Profile Pageさん

アクアさんselect 要素の下に潜り込んでしまう問題を修正しました。nver1.6 で修正されているので、ダウンロードし直してみてください。

2009年4月21日 13:13

19 - チャッキー さん

えどさん。n重ね重ねありがとうございます。n別件のモノですが、同一ドメイン内にありますので可能なんですね!nこの方法も習得出来れば、今後のアイデアにも幅が広がると思います。nありがとうございました。

2009年4月21日 14:48

20 - なべ さん

いつもためになる情報ありがとうございます。n早速、使わせていただいているのですが、どうしてもわからないことがありましたので、n教えていただけないでしょうか?niframeを表示させた場合、横スクロールがどんなに余白をとっても消えないのですが、n完全に非表示にするにはどうしたらいいのでしょうか?nお手数ですが、宜しくお願いいたします。

2009年5月19日 05:31

21 - えど Author Profile Pageさん

>>20 - なべさんコメントありがとうございます。niframeの横スクロールが消えない、ということですが確認されているブラウザはなんでしょうか?nまた、ブログ内にあるサンプルでも同様に消えませんか?nもしサンプルは大丈夫で、自身のサイトに組み込んだ際に問題があるのだとすると、もしかしたらniframe内のコンテンツの影響かもしれません。nもし可能であれば、お問い合わせフォームから実際のサイト(かサンプル)のURLを送っていただけたらn確認したいと思います。

2009年5月19日 17:29

22 - チャッキー さん

えどさん。n以前はお世話になりました。n最近、気が付いたのですが、このJavaだとMac版のIEだと機能しない(ポップアップしない)事が判明しました。nFirefoxやSafariでは問題無いのですが…。n勿論、Windows環境でも問題ありません。nこの場でお聞きするのはお門違いかもしれませんが、対策が思いつく様ならご教示願えればと思いました。n何か、IE用にタグを追加するとかあるのですかね?nIEでのJava設定を弄ってみましたが、特に変わりませんでした。n何卒、宜しくお願い致します。n

2009年5月26日 11:23

23 - えど Author Profile Pageさん

>>22 - チャッキー さんコメントありがとうございます。nMac 版 IE ですか・・。ちょっと環境がないので確認できないんです・・。nただ、すでにサポートが終わって久しいブラウザですし、nMSN のサイトも Mac 版 IE で見るととんでもないことになっているので個人的には無視してもいいのかな、と思っています・・。すみません。

2009年5月26日 13:38

24 - チャッキー さん

えどさん。返信ありがとうございます。nやはり、現状ではそうですよね。n個人的にも、制作時にMac用ブラウザーは気にしない様にしてるのですが。nわざわざ、ありがとうございました。n

2009年5月27日 10:42

25 - ぷぷり さん

えどさん、はじめまして。n今製作中のウェブサイトにえどさんのPopupWindowの実装を試みているのですが、どうしても以下のことが分かりません。ninlineを表示させようとしているのですが、最初に元のページでDOMを非表示にさせておいた後、PopupWindowを開くときに表示させたいのですが、このようなことはできるのでしょうか?nよろしくお願いしますn

2009年7月23日 18:08

26 - ぷぷり さん

えどさん、すみません。自己解決致しました。n変更した内容は、以下の通りです。ncase 'inline': content = this.getInline( content ); $( content ).appendTo( $( '#pwbody' + _cnt ) ); $( '#pwContentsBtn' + _cnt ).css( 'display', 'none' ); content.style.display = "block"; <-----この行を追加しました。n break;ありがとうございました。n

2009年7月23日 18:54

27 - えど Author Profile Pageさん

>>26 - ぷぷりさんnコメントありがとうございます。nそうですよね、普通は消しておいて表示するものですよね;n指摘いただいたようにちょっと修正したいと思います。

2009年7月24日 10:56

28 - えび さん

複数の同一コンテンツを特定のvarName指定iframeで呼び出したときに、varNameを使って呼び出し先のコンテンツ内で自分自身を閉じると、2つ目以降をクローズでスクリプトエラーとなってしまいます。なので、varNameを使わずに自分自身をとじたいのです。n自分で試したのは、以下のとおりです。n-- 呼び出し先のコンテンツ内で、varNameを使って自分自身をクローズwindow.parent['xxx'].close(); そこで質問なのですが、iframeモードで呼び出し、呼び出し先のコンテンツの中でvarNameを使わずに自分自身を閉じるにはどうすればよいのでしょうか?n

2009年7月24日 12:14

29 - えど Author Profile Pageさん

>>28 - えびさんコメントありがとうございます。n返事が遅くなってすみません。n確かに、同じものを2個以上開いた状態でひとつを閉じると、2個目以降が閉じれないですね・・。nちょっと実装を見直す必要があるので、nもうしばらくお待ちいただけますか。n更新したらブログに掲載したいと思います。

2009年8月14日 11:35

30 - Koy さん

はじめまして。ホームページ初心者です。n検討ちがいな質問でしたらお許し下さい。nポップアップ表示時、タイトルバーと内容の箇所のフォントカラーの変更手順をご教授下さい。nそれでは失礼します。

2009年8月25日 15:20

31 - えど Author Profile Pageさん

>>30 - Koy さんコメントありがとうございます。nタイトルバーと内容、双方のカラーを変えたい場合はpopupwindow.css 内にある「.pwContainer」に変更したいフォントカラーを追記してください。nまたそれぞれ個別に変更したい場合はそれぞれタイトル:「.pwBarCenter」n内容:「.contentsBody」nに対してフォントカラーを設定してください。

2009年8月26日 10:03

32 - Koy さん

早急なご教授本当に助かりました。nさっそく、ぶち込んでやります (^0^)ありがとうございました。

2009年8月26日 14:11

33 - りょう さん

はじめまして。すごく便利で使わせていただいています。nといいつつ、さっそく質問なのですが、HP内で「入力」ってボタンを押すと、非表示(div style="display:none")にしてる入力フォームをpopupwindows内に表示するような使い方をしています。(コメント25のぷぷりさんのようにソースは触らずに自分のjavascript側でdispya:blockとしています)n入力フォーム内に日付を入れるテキストボックスがあり、jQuery UI.datepicker を使っているんですが、datepickerのウィンドウがpopupwindowの下に入ってしまいます。n何か対策はあるでしょうか?n他のライブラリとの整合性まで質問してしまい申し訳ありませんが、分かるようであればご教授いただきたいです。n

2009年8月27日 21:23

34 - えど Author Profile Pageさん

>>33 - りょう さんコメントありがとうございます。njQuery UI.datepicker を使ったことがない+サイトを見ていないので憶測ですが、下に入ってしまう、ということなのでおそらく z-index あたりの問題だと思われます。npopupwindow は、z-index を多めに取ることで大体の要素の上に来るよう設定しています。n初期値は「1050」です。(設定は popupwindow.js 内で直でしています)nなので、この数値を下げるか、nその下に入ってしまうボックスの z-index の値を 2000 などの大き目の数値に設定することによって回避可能だと思います。nちなみに、1050 が初期値、というのは複数ウィンドウを開いている際に、nアクティブになったウィンドウを最前面に出すためにクリックされた際に常にカウントアップしていくためクリックした回数によっては 1050 よりも大きくなります。nですので、できるだけ大き目の数値を設定しておくことをオススメします。

2009年8月28日 10:01

35 - りょう さん

回答ありがとうございました。nz-indexの設定でdatepickerの画面は表に出てきました。感謝です。n が、次の問題に直面中です(泣popupwindow内にコピーされたフォームと元の非表示フォームのIDが同じだからうまくいっていないような気がしますが、こっから先は自力でがんばってみます。n参考までに、popupwindow内にフレームをコピーした場合、checkboxへのlもうまくいかないようです。labelのテキストをクリックしてもcheckboxにチェックが入りません。n(非表示側を表示させて、labelテキストをクリックして、checkboxにチェック反映するのは確認しています)

2009年8月29日 00:09

36 - りょう さん

解決しました。nやっぱりpopupwindow内にコピーされたのと同じIDなのが問題でした。nソース修正する力は無いので、popupwindowに取り込み後、javascriptでIDを書き換えたらうまくいきました。n場合によりきでしょうが、DOM要素を表示する場合はID付与し直したほうがいいのかもしれません。nID = 'pWindow' + this.pwIDNumber + "_" + IDな感じで。nすでにID振りなおすオプションがあったりしたら、私の理解不足ですが。n

2009年8月29日 01:00

37 - えど Author Profile Pageさん

>>36 - りょうさんn確かに ID は重複すると問題がある場合がありますね・・。nただ、知識不足でコピー内の全 ID をどう制御したらいいか、nというのが整理できてないんです・・。nもう少しそのあたり研究してみます。nコメントありがとうございました!

2009年8月31日 10:11

38 - りょう さん

IDの振りなおしですが、適当にソース修正してみました。n140行目あたりのoptを取得している所に var idprefix = opt.idprefix ? opt.idprefix : '';を追記。n次に、inline要素を取得している所に追記ncase 'inline': content = this.getInline( content ); $( content ).appendTo( $( '#pwbody' + _cnt ) ); $( '#pwContentsBtn' + _cnt ).css( 'display', 'none' ); content.style.display = "block"; /* コメント26 ぷぷりさんの修正 *//*** 以下5行追加 ***/ if( idprefix!=' '){  $('#pwbody'+_cnt+" [id]").each(function(){   $(this).attr( 'id', idprefix+_cnt+'_'+this.id );  }); }break;これで、オプションに記述すれば、反映すると思います。(例:idprefix:'pw')オプションはtrue/falseにして、固定の接頭語か接尾語振ってもいいかもしれません。nもっといい実装あるかもしれませんが、参考になればと思いますn

2009年9月 1日 14:42

39 - りょう さん

先ほどのコメントに追記です。nlabelのfor属性の修正を忘れていました。n$('#pwbody'+_cnt+" label[for]").each(function(){ $(this).attr( 'for', idprefix+_cnt+'_'+$(this).attr('for'));});ifの中に追記すればいけると思います。

2009年9月 1日 15:08

40 - えど Author Profile Pageさん

>>りょうさんnおお、どもです!n時間があるときに見てみたいと思います。nありがとうございましたー!

2009年9月 2日 12:41

41 - やは さん

始めまして、大変素晴らしいスクリプトで感動いたしました。nところで、prototype.jsと組み合わせて使用しようとすると、njavascriptのエラーが表示され動作しなくなってしまいました。nこれを回避する方法はありますでしょうか?nPrototype JavaScript framework, version 1.6.1<script type="text/javascript" src="jquery-1.2.6.min.js"></script>n<script type="text/javascript" src="popupwindow-1.6.js"></script>n<script type="text/javascript" src="prototype.js"></script> ←これを追加

2009年9月 4日 15:17

42 - えど Author Profile Pageさん

>>41 - やは さんコメントありがとうございます。nそれは $関数が競合しているために起こるエラーですね。n調べたら案外簡単に対応できたので競合しないよう修正しました。n新しく、ver1.7 になっているのでお手数ですがダウンロードしなおしていただけますか?

2009年9月 4日 17:10

43 - yasu さん

はじめまして。n便利なスクリプトありがとうございます。n質問なのですが、win IE6.0では最小化ボタンを押してもn白い背景が残ってしまうのですが、何か回避方法などありますでしょうか。nbootcamp windowsXPのmultipleIEで確認したせいですかね。。nIE6でも問題なければ是非利用させていただこうと思います。nよろしくお願いいたします。n

2009年10月 7日 19:18

44 - えど Author Profile Pageさん

>>43 - yasuさんコメントありがとうございます。nおおお、ほんとですね・・。nおそらく、select要素への対策が原因のようです・・。nできるだけ急いで修正します・・。nご指摘ありがとうございました!

2009年10月 7日 19:43

45 - Weasel さん

PopupWindowを利用させていただいてます。ありがとうございます。n念のための確認ですが、リリースノートやスクリプト内のバージョン表記が1.6になっておりますが、1.8ということでよろしいのでしょうか?

2009年11月 4日 03:07

46 - えど Author Profile Pageさん

>>45 - Weaselさんコメントありがとうございます!nすみません、verなど更新していませんでした;nご指摘ありがとうございます。nスクリプト内のverなどをアップデートしました。n念のため、最新版をダウンロードしてみてください。nまたなにか気づいた点などあれば連絡頂けると助かります。n

2009年11月 4日 11:38

47 - チャッキー さん

えどさん度々、失礼致します。nポップアップ表示時にフォントサイズの変更は何処をどうしたら宜しいでしょうか?n最初に組み込んだ時には良かったんですが、「popupwindow.js」のバージョンを色々試してたら見た目にフォントが大きくなってしまいました。原因は不明です(^^ゞnタイトルと内容のフォントサイズをそれぞれ変更したいのですが…。n初歩的な事かも知れませんが宜しくお願い致します。

2009年12月 3日 16:46

48 - チャッキー さん

えどさん。nCSS内の「font-family」を修正する事で自己解決致しました。nお騒がせ致しました。m(__)m

2009年12月 5日 20:36

49 - えど Author Profile Pageさん

>>48 - チャッキーさんすみません、最近忙しくて色々返信できずにおります・・。nでも無事、解決したようでよかったです。

2009年12月 6日 10:08

50 - もやしつぼ さん

大変すばらしいスクリプトなので、利用させていただきます。n質問なのですが、「リサイズ可能なボックスを表示」を実装しましたところ、横幅はサイズを変えたときにちゃんと動作するのですが、縦幅が200pxぐらい固定で、それ以上ボックスを大きくしてもずっと200pxぐらいの大きさのままです。n多分cssか何かで、縦幅の指定が競合しているのではないかと思うのですが、どこをどう見たらよろしいでしょうか?n初心者ですので、質問の表現がおかしければご容赦ください。nよろしくお願いします。n

2010年1月 6日 02:00

51 - えど Author Profile Pageさん

>>50 - もやしつぼさんコメントありがとうございます!n基本的に、style 属性に直接値を指定しているので他の CSS ファイルが影響することはあまりないはずですが、nどこかの CSS ファイルで !important を利用したサイズ指定はしていないでしょうか?n場合によってはその値が適用され変更が反映されないのかもしれません。nもしすでにどこかにアップされているのであれば、n(問い合わせからでもいいので)URLを教えてもらえると原因の特定ができるかもしれません。

2010年1月 7日 14:31

52 - もやしつぼ さん

>>51 - えどさんご返信ありがとうございます!n自分で色々と弄っていた結果、自己解決いたしました。nこの度は、丁寧なご回答どうもありがとうございました。n

2010年1月 9日 02:05

53 - えど Author Profile Pageさん

>>52 - もやしつぼさん無事解決されたようでよかったです。nCSS は思わぬところの指定が悪さをしてることもあるので厄介ですよね;nぜひ、使ってやってください(*'-')

2010年1月 9日 10:27

54 - モフィー さん

フローティングポップアップウィンドウ、大変素晴らしいもので、使わせて頂いております。いいものをありがとうございます。

aタグがトリガーとなってウィンドウが表示されるのが仕様なのですが、HTMLファイル読み込み時(onload等)で読み込ませる方法とかあるんでしょうか?
例えば、このページを見る前に利用規約を読ませたい時や、複数あるページリンクを選んでもらいたい時などなど・・・使い道はたくさんあるんですが、できるものなんでしょうか?

この発想に問題が、使い方として問題なければ教えていただきたいです。nよろしくお願いします。

2010年2月19日 16:08