えどさん、はじめまして。

今製作中の私のウェブサイトにえどさんのPopupWindowの実装を試みているのですが、どうしても以下のことが分かりません。

FirefoxはOKなのですが、ＩＥだとWindowが画面の下のほうに来てしまいます。

Windowの中にテキスト、画像、表、リンクを表示したいのですが、可能ですか？　もし可能なら具体的にはどうすればいいのでしょう？

それとカスタマイズやライセンスの規約などはどうなっているのでしょう？

まったく初歩的な質問だと思いますが、お時間が空いたときにアドバイスをいただけたらありがだいです。ちなみに私はjsはほとんどだめで、cssは少々です。よろしくお願いします。

>>1 - masayuki さん
えぇと、もしその問題のページを見ることができるのでしたら
URLを教えて頂けると早く解決するかと思います。

こちらでIE6、7をチェックした限りでは特に問題が起きていませんが、
IEには互換モードや準拠モードなど、
いくつかの要因が重なって想定外の状態になることはままあるので、
もしかしたらそういった原因が関係しているかもしれません。
（なので、実際に見ないとなんとも言えない、というのが正直なところです・・）

下のほうに表示される、とありますが、
表示位置だけの問題でしょうか？
たとえば、ドラッグやリサイズ、表示コンテンツなどにおいては
特に問題ありませんか？

もし表示位置以外問題がないのであれば、
上でも書いたように、モードの違いで取得されるべき値に誤差が出ているのかもしれません。

それからライセンスやカスタマイズについてですが、
勉強用として作ったものですので、特にライセンスなどは考えていません。
なのでカスタマイズも自由に行っていただいてかまいません。
（そのためにデザイン用のPSDファイルも同梱してあります）

コンテンツとして表や画像を、ということですが、
単にURLなどを指定して画像を表示するだけでしたら可能ですが、
画像、リンク、表などがまとまって表示されることを想定されているのだとすると
簡単に実装するにはiframeがいいかな、と思います。

あとは、JSを駆使しないといけませんが、
JSで生成したものをコンテンツに含めることもできます。
なので、JSでコンテンツを作成して表示する、という方法も考えられますが、
JSがそれほど詳しくないとのことなので、
若干むずかしいかもしれません・・。

えどさん、さっそくのお返事ありがとうございます。

何か私にはむずかしそうですね。

サイトはここですので、ちょっとのぞいてみて下さい。

http://www.japan-blue.com/women's.html

ではよろしくお願いいたします。

>>3 - masayuki さん
確かに変な場所に表示されますね・・。
しかも、IE6の場合サイズがやたら大きくなりますね。

ちょっとまだ詳しく見ていないのでわかりませんが、
$popに指定しているheightをなくしても正常に
表示されないでしょうか？

heightは自動で伸びるので、特に指定しなくても大丈夫です。

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

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

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

メッチャいいですねー！！
使わせて頂きますm(__)m

でも、なぜかcloseをfalseにしてもtrueにしても閉じるボタンが表示されます。
クリックしても動作しませんが・・・
それと最大化ボタンも常に表示されてます。

既存サイトに組み込んだので、スタイルシートあたりが意地悪してるのかな？

>>8 - アクア さん
コメントありがとうございます(*'-')

うまく動かないですか・・？(;´Д｀)
ダウンロードしたデモではちゃんと動いているので、
もしかしたらそちらのサイトのなにかが悪さしているのかもしれません。。

すでにアップされているのであれば、
URLなんかをメールでいただければちょっと確認します。

とても素晴らしいモノなので是非、使わせて頂きたく思い、組み込んでみたのですが…

試しに「500x250のアラートボックスを表示」をやってみたのですが、BODY内のレイアウトが崩れてしまいました。（横に余分なスペースが出来てしまいます）
BODY全体はテーブルで横800ピクセルにしています。

どうも、読み込んでいるスタイルシートが関係してる様なのですが、どこを弄れば良いか判らず質問させて頂きました。
宜しくお願い致します。

>>10 - チャッキーさん
コメントありがとうございます！
状況の確認なんですが、レイアウトが崩れた、というのは
ポップアップウィンドウ用の CSS を読み込んだら、ということでしょうか？

それとも、ポップアップウィンドウを表示させるとレイアウトが崩れる、ということでしょうか？

前者の場合であれば、もしかしたら読み込んだ CSS ファイルが影響しているかもしれません。

というのも、ウィンドウ部分を実現するために table を利用しているため、
テーブルレイアウトの場合、場合によっては読み込んだ CSS が悪さをしてしまうかもしれません。

ダウンロードした popupwindow.css 内に記述されている
ID や class で、ご自身のサイトで使っているものと重複しているものはありませんか？

もし重複していたらそれが原因かもしれません。（いちおう、重複しないように注意したつもりではいますが、可能性は 0 ではないので・・）

それから、もしレイアウトが崩れるサイトの URL をメールなどで送っていただければ原因を調べたいと思います。（ Mail: css.eblog@gmail.com ）

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

えどさん。早速のご回答ありがとうございます。
私の症状としましては前者です。ポップアップウィンドウを開く前に崩れてます。
…が、良く見ると全体では無く部分的に崩れてるんですよ。
なので、テーブルで幾つか分割してますので、その辺りが関係してるのかも？と思い、調べてます。
IDやCLASS名は特に重複してるモノは無いです。

ちなみに、別件なんですが…。
既存の"iframe"内に組み込んでみたのですが、案の定、ポップアップウィンドウは"iframe"内にしか表示されませんでした。
これを、"iframe"外に表示させる事は可能でしょうか？
この方法で解決出来れば一番良いのですが。
ターゲット指定では上手くいきませんでしたので、何か得策は無いか？と考えております。
度々、すみませんが宜しくお願い致します。

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

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

でも問題が解決したようでよかったです！

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

対策があるか、ちょっと調べてみますね！

>>13 - チャッキー さん
別件のやつですが、iframe で表示しているのが
ドメインが同じコンテンツを表示しているのであれば、
iframe の親側にこのスクリプトと CSS を読み込ませてから
iframe 側から、親のスクリプトを呼ぶことで解決できます。

var obj = new parent.$pop(...);

でウィンドウを表示することができると思います。
ただ、もし iframe 内のドメインが異なる場合は
セキュリティの観点から、iframe から親にはアクセスできないので無理です・・。

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

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

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

>>20 - なべさん
コメントありがとうございます。
iframeの横スクロールが消えない、ということですが
確認されているブラウザはなんでしょうか？

また、ブログ内にあるサンプルでも同様に消えませんか？
もしサンプルは大丈夫で、自身のサイトに組み込んだ際に
問題があるのだとすると、もしかしたら
iframe内のコンテンツの影響かもしれません。

もし可能であれば、お問い合わせフォームから
実際のサイト（かサンプル）のURLを送っていただけたら
確認したいと思います。

えどさん。
以前はお世話になりました。
最近、気が付いたのですが、このJavaだとMac版のIEだと機能しない（ポップアップしない）事が判明しました。
FirefoxやSafariでは問題無いのですが…。
勿論、Windows環境でも問題ありません。

この場でお聞きするのはお門違いかもしれませんが、対策が思いつく様ならご教示願えればと思いました。
何か、IE用にタグを追加するとかあるのですかね？
IEでのJava設定を弄ってみましたが、特に変わりませんでした。

何卒、宜しくお願い致します。

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

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

わざわざ、ありがとうございました。

えどさん、はじめまして。

今製作中のウェブサイトにえどさんのPopupWindowの実装を試みているのですが、どうしても以下のことが分かりません。

inlineを表示させようとしているのですが、最初に元のページでDOMを非表示にさせておいた後、PopupWindowを開くときに表示させたいのですが、このようなことはできるのでしょうか？

よろしくお願いします

えどさん、すみません。自己解決致しました。

変更した内容は、以下の通りです。
case 'inline':
content = this.getInline( content );
$( content ).appendTo( $( '#pwbody' + _cnt ) );
$( '#pwContentsBtn' + _cnt ).css( 'display', 'none' );
content.style.display = "block"; <-----この行を追加しました。
break;

ありがとうございました。

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

複数の同一コンテンツを特定のvarName指定iframeで呼び出したときに、varNameを使って呼び出し先のコンテンツ内で自分自身を閉じると、2つ目以降をクローズでスクリプトエラーとなってしまいます。なので、varNameを使わずに自分自身をとじたいのです。
自分で試したのは、以下のとおりです。

-- 呼び出し先のコンテンツ内で、varNameを使って自分自身をクローズ
window.parent['xxx'].close();

そこで質問なのですが、iframeモードで呼び出し、呼び出し先のコンテンツの中でvarNameを使わずに自分自身を閉じるにはどうすればよいのでしょうか？

>>28 - えびさん
コメントありがとうございます。
返事が遅くなってすみません。

確かに、同じものを2個以上開いた状態で
ひとつを閉じると、2個目以降が閉じれないですね・・。

ちょっと実装を見直す必要があるので、
もうしばらくお待ちいただけますか。
更新したらブログに掲載したいと思います。

はじめまして。ホームページ初心者です。

検討ちがいな質問でしたらお許し下さい。
ポップアップ表示時、タイトルバーと内容の箇所のフォントカラーの
変更手順をご教授下さい。

それでは失礼します。

>>30 - Koy さん
コメントありがとうございます。

タイトルバーと内容、双方のカラーを変えたい場合は
popupwindow.css 内にある「.pwContainer」に
変更したいフォントカラーを追記してください。

またそれぞれ個別に変更したい場合はそれぞれ
タイトル：「.pwBarCenter」
内容：「.contentsBody」
に対してフォントカラーを設定してください。

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

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

>>33 - りょう さん
コメントありがとうございます。

jQuery UI.datepicker を使ったことがない＋サイトを見ていないので
憶測ですが、下に入ってしまう、ということなので
おそらく z-index あたりの問題だと思われます。

popupwindow は、z-index を多めに取ることで
大体の要素の上に来るよう設定しています。
初期値は「1050」です。（設定は popupwindow.js 内で直でしています）

なので、この数値を下げるか、
その下に入ってしまうボックスの z-index の値を 2000 などの
大き目の数値に設定することによって回避可能だと思います。

ちなみに、1050 が初期値、というのは
複数ウィンドウを開いている際に、
アクティブになったウィンドウを最前面に出すために
クリックされた際に常にカウントアップしていくため
クリックした回数によっては 1050 よりも大きくなります。

ですので、できるだけ大き目の数値を設定しておくことをオススメします。

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

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

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

もう少しそのあたり研究してみます。
コメントありがとうございました！

IDの振りなおしですが、適当にソース修正してみました。
140行目あたりのoptを取得している所に
var idprefix = opt.idprefix ? opt.idprefix : '';
を追記。
次に、inline要素を取得している所に追記
case '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にして、固定の接頭語か接尾語振ってもいいかもしれません。
もっといい実装あるかもしれませんが、参考になればと思います

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

ifの中に追記すればいけると思います。

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

始めまして、大変素晴らしいスクリプトで感動いたしました。

ところで、prototype.jsと組み合わせて使用しようとすると、
javascriptのエラーが表示され動作しなくなってしまいました。
これを回避する方法はありますでしょうか？

Prototype JavaScript framework, version 1.6.1

＜script type="text/javascript" src="jquery-1.2.6.min.js"＞＜/script＞
＜script type="text/javascript" src="popupwindow-1.6.js"＞＜/script＞
＜script type="text/javascript" src="prototype.js"＞＜/script＞ ←これを追加

>>41 - やは さん
コメントありがとうございます。
それは $関数が競合しているために起こるエラーですね。
調べたら案外簡単に対応できたので競合しないよう修正しました。

新しく、ver1.7 になっているので
お手数ですがダウンロードしなおしていただけますか？

はじめまして。
便利なスクリプトありがとうございます。
質問なのですが、win IE6.0では最小化ボタンを押しても
白い背景が残ってしまうのですが、何か回避方法などありますでしょうか。
bootcamp windowsXPのmultipleIEで確認したせいですかね。。

IE6でも問題なければ是非利用させていただこうと思います。
よろしくお願いいたします。

>>43 - yasuさん
コメントありがとうございます。

おおお、ほんとですね・・。
おそらく、select要素への対策が原因のようです・・。

できるだけ急いで修正します・・。
ご指摘ありがとうございました！

PopupWindowを利用させていただいてます。ありがとうございます。

念のための確認ですが、リリースノートやスクリプト内のバージョン表記が1.6になっておりますが、1.8ということでよろしいのでしょうか？

>>45 - Weaselさん
コメントありがとうございます！
すみません、verなど更新していませんでした；
ご指摘ありがとうございます。

スクリプト内のverなどをアップデートしました。
念のため、最新版をダウンロードしてみてください。

またなにか気づいた点などあれば連絡頂けると助かります。

えどさん

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

初歩的な事かも知れませんが宜しくお願い致します。

えどさん。

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

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

大変すばらしいスクリプトなので、利用させていただきます。

質問なのですが、「リサイズ可能なボックスを表示」を実装しましたところ、横幅はサイズを変えたときにちゃんと動作するのですが、縦幅が200pxぐらい固定で、それ以上ボックスを大きくしてもずっと200pxぐらいの大きさのままです。

多分cssか何かで、縦幅の指定が競合しているのではないかと思うのですが、どこをどう見たらよろしいでしょうか？

初心者ですので、質問の表現がおかしければご容赦ください。
よろしくお願いします。

>>50 - もやしつぼさん
コメントありがとうございます！

基本的に、style 属性に直接値を指定しているので
他の CSS ファイルが影響することはあまりないはずですが、
どこかの CSS ファイルで !important を利用したサイズ指定はしていないでしょうか？

場合によってはその値が適用され変更が反映されないのかもしれません。
もしすでにどこかにアップされているのであれば、
（問い合わせからでもいいので）URLを教えてもらえると原因の特定ができるかもしれません。

＞＞51 - えどさん

ご返信ありがとうございます！
自分で色々と弄っていた結果、自己解決いたしました。

この度は、丁寧なご回答どうもありがとうございました。

>>52 - もやしつぼさん
無事解決されたようでよかったです。
CSS は思わぬところの指定が悪さをしてることもあるので厄介ですよね；

ぜひ、使ってやってください(*'-')

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

aタグがトリガーとなってウィンドウが表示されるのが仕様なのですが、HTMLファイル読み込み時（onload等）で読み込ませる方法とかあるんでしょうか？

例えば、このページを見る前に利用規約を読ませたい時や、複数あるページリンクを選んでもらいたい時などなど・・・使い道はたくさんあるんですが、できるものなんでしょうか？

この発想に問題が、使い方として問題なければ教えていただきたいです。

よろしくお願いします。

>>54 - モフィー さん
コメントありがとうございます！
ご質問の件ですが、サンプルでは a タグにトリガーを設定していますが
クリック時に実行しているのは「new $pop( 'コンテンツ' );」なので
この部分を、言われているように onload 時に指定すれば
読み込み完了後にポップアップを表示することが可能です。

また、「var pop = new $pop( 'コンテンツ' );」などとすることで
あとから「pop.close();」のようにウィンドウを操作することも可能です。
使える関数は記事内に書かれているのでそちらを参考にしてください。

>>55 - えど さん
ご返信ありがとうございます！

早速以下のコードをbodyタグに入れて試してみたのですが、ポップアップが出現しませんでした。
=== ソースコード

=== ソースコード

＞また、「var pop = new $pop( 'コンテンツ' );」などとすることで
これも試してみたのですが、結果は同じく表示できませんでした。

ちなみに、aタグで設定すればちゃんと表示してくれてます。

サイトURLを貼りたいところなんですが、PCローカル上で作っている段階でサーバーレンタル等してないのでURLは貼れませんでした。

すみませんが、また御指摘・御指導の方、よろしくお願いします。

>>56 - モフィーさん
うまく表示されませんでしたか。
aタグで実行する必要はないので
おそらく記述に問題があるのかな、とは思いますが
MT の仕様でソース部分が抜けてしまっています・・。

なので、お問い合わせから
もう一度改めて記述部分を送っていただけないでしょうか？
よろしくお願いします。