ヘルプ --ポップアップ--
ポップアップとは、HTMLドキュメントを表示しているウィンドウとは別のウィンドウ上にHTMLドキュメントを表示するもので、別のウィンドウを表示させる元のHTMLドキュメントが親ウィンドウとなり、元のドキュメント内のスクリプトにより別のウィンドウを表示させます。
ポップアップにはcreatePopup()というインターネットエクスプローラ独自のDHTMLオブジェクトのメソッドを使用したものと、window.open()というjavascriptの持つサブウィンドウを開くメソッド(windowオブジェクトのメソッド)を使用したものがあります。ぴあにしもではメールに手軽に使用できる前者を使用しています。
[メインメニュー]
[ヘルプ内サブメニュー]
雛形倶楽部情報データベースの「ポップアップひな形を配布する方法」や「ポップアップ雛形でのポップアップドキュメント上のオブジェクトへのアクセス」、「親エレメントから子エレメントを参照する方法」、「ポップアップを使ったひな形がフルスクリーンにならない」なども参考にしてください。
ポップアップの方法
ポップアップさせるには、windowオブジェクトのメソッドであるcreatePopup()でポップアップオブジェクトを作成します。
objPopup=window.createPopup()
これによりobjPopupというオブジェクトが作成されます。
objPopupオブジェクトはポップアップオブジェクトで、このオブジェクトはHTMLドキュメントとしてのプロパティやメソッド・コレクションを持ちます。
例えばdocumentオブジェクトやisOpenプロパティを持っています。documentオブジェクトにはbodyオブジェクトをはじめdocumentオブジェクトに含まれる様々なプロパティやメソッド・イベントハンドラ・コレクションを持ちます。更にbodyオブジェクトにも様々なプロパティやメソッド・イベントハンドラ・コレクションを持ちます。
これらプロパティを操作すれば、ポップアップオブジェクトの様々な属性を変更したり、取得したりできます。bodyエレメントに別のエレメントを追加したりも可能です。
通常objPopupオブジェクトのdocumentオブジェクトのbodyオブジェクトに親側からエレメントを書き込んだりすることでポップアップレイアウトを行います。
bodyオブジェクトを扱いやすくするためにオブジェクトとしてオブジェクト変数に入れてしまいましょう。
popBody=objPopup.document.body
こうしておけばbodyの属性を操作する際にobjPopup.document.body.style.backgroundColor="red"をpopBody.style.backgroundColor="red"と簡潔にすることができますね。
同様にbodyのallコレクションも変数に入れておきましょう。allコレクションとはbodyエレメント下にあるエレメント全てのコレクション参照することです。
<body>
<img
id="image1">
</body>とあればbodyのallコレクションのアイテムはimgエレメントひとつということになります。childrenコレクションの場合は直下のエレメントだけのコレクションになり、直下のエレメントの中に含まれるエレメントは含みませんが、allコレクションでは全てを対象にします。
popAll=objPopup.document.body.allまたはpopAll=popBody.allとします。こうすることでbody下にあるエレメントをpopAllのアイテムとして扱えるようになります。
ポップアップのbodyにエレメントを書き込むには、popBodyのプロパティinnerHTMLで<body>〜</body>間にhtmlを書き込みます。
popBody.innerHTML="ソース"という形式です。popBody.innerHTML="<img
id='popimg1' style='position:absolute; left:100px; top:50px'>"のようにソースを書き込めます。この場合ポップアップ上のpopimg1エレメントを親のスクリプトでアクセスするにはpopAll("popimg1")とします。popimg1のleftを200pxに変えるには、popAll("popimg1")style.left="200px"となります。
実際には親の別のエレメントの中にソースとなるHTMLを記述しておき、そのソースをポップアップのソースに組み込むようにすることが多いです。ぴあにしもの場合も
<!--
ここからポップアップ用のドキュメントとスクリプト //-->
<!-- ポップアップ上のオブジェクト記述
//-->
<div id="popupdoc" style="display:none">
〜
〜
〜
〜
〜
〜
</div>
のようにpopupdocエレメント(divエレメント)の中のHTML部分(popupdocのinnerHTML)をポップアップ側に書き換えしています。
ポップアップのbodyの属性を設定したい場合は、先に書いたようにpopBody.style.border="red 2px ridge"などのようにします。
逆にポップアップ側から親のオブジェクトにアクセスするにはparent.オブジェクト名とします。親のスクリプトの関数をポップアップ側から実行させるには、parent.関数とします。親の<img id="oyaimg1" src="hogehoge.jpg">にアクセスするにはparent.oyaimg1とします。oyaimg1のsrcを参照する場合はparent.oyaimg1.srcとなりますね。あ〜ちなみにSCRIPTタグでもIDをつけることができますよ。
例：
<SCRIPT ID="scr1"
language="javascript">
このようにしてポップアップの設定やエレメントを書き込んだらポップアップオブジェクトはまだ表示されていない状態なので、objPopupオブジェクトのisOpenプロパティはfalseになっています。objPopupオブジェクトを表示させるにはobjPopupオブジェクトのメソッドshow()を使用して表示させます。
objPopup.show("X座標","Y座標","ポップアップウィンドウの横幅","ポップアップウィンドウの縦幅")となります。X座標・Y座標はポップアップウィンドウの左上コーナーの表示位置をスクリーンの表示可能領域の座標で表します。Windowsのバージョンにおいてはセキュリティ上の問題からポップアップは表示領域外に追い出すように表示させることはできなくなっています。
ポップアップを非表示にするにはobjPopupオブジェクトのhide()メソッドを使用します。objPopup.hide()
で、このようなポップアップさせるソースの準備をするのは大変なので、ぴあにしもを大いに利用してください。ぴあにしものポップアップはそれほど多くの機能は持っていませんが、ソースを編集してオリジナルなポップアップひな形作りに挑戦してくださいね。ぴあにしもで作成したソースでは下のようにピンクの部分の下に追加するとよいです。
<!-- ここからポップアップ用のドキュメントとスクリプト //-->
<!--
ポップアップ上のオブジェクト記述 //-->
<div id="popupdoc"
style="display:none">
<!-- ここからポップアップ用のHTML+TIMEスタイルシート
===TIPS by nobu=== //-->
<STYLE id="PopupStyle">
.time{BEHAVIOR:
url(#default#time2)}
t\:*{BEHAVIOR: url(#default#time2)}
v\:*{BEHAVIOR:
url(#default#VML)}
</STYLE>
<!-- ポップアップ上のCloseボタン設定
//-->
<input type="button" value="Click to Close"
ID="closebutton" style="position:absolute; Z-INDEX:300;
left:0px; top:0px; font-size:8pt; font-family:'MS UI Gothic'; cursor:hand; color:White;
width:200px; height:50px; background-color:black; text-align:center" onclick="parent.objPopup.hide()">
<!--
ポップアップ上のオブジェクト記述 //-->
<div id="pobject1"
style="position:absolute; width:200px; height:200px; z-index:1; background-color:white;
background-repeat:repeat; background-position:0px 0px; overflow:auto">
</div>
<script
language="JScript">
pobject1.style.backgroundImage="URL("+imagf2.src+")"
</script>
</div>
他参考：ポップアップでHTML+TIMEを利用(VMLもOK)
[ヘルプ内サブメニュー]
[メインメニュー]
Copyright(c) 2004 My Software. All rights reserved.