S-JIS[2004-02-08/2007-08-12] 変更履歴

ダイアログ（ポップアップ）

ここに書いているのは、新しいHTMLを｛普通に／モードレスダイアログ[/2007-08-12]で／モーダルダイアログで｝開く方法 。
単純なメッセージ表示や文字の入力は別の命令を使う。

まずは、普通にリンクで移動する方法

HTML：

<A HREF="dialog_target.html">普通に移動</A>

<INPUT TYPE="button" VALUE="スクリプトで移動" onClick="window.location='dialog_target.html'">
                                                  <!-- location.href  ='dialog_target.html'でも可 -->

サンプル：普通に移動

モードレスダイアログで開く方法

新しいウィンドウを開いて（ポップアップ）、そこにHTMLを表示させる方法。
モードレス（modeless）というのはモーダルの反対で、そのウィンドウを開いている間も他のウィンドウをいじることが出来る。

HTML：

<SCRIPT language="JavaScript">
function popup_modeless(url){
	var newWin = window.open(
		url,    //移動先
		"pop",  //ターゲット名（aタグのtargetと同様）
		"width=800, height=480"
	);
	newWin.focus();
}
</SCRIPT>

<INPUT TYPE="button" VALUE="モードレス" onClick="popup_modeless('dialog_target.html')">

ダイアログ側で「opener」を使うことにより、開いた元のウィンドウにアクセスできる。

普通にwindow.open()でURLを指定すると、メソッドはGETになる。[2007-08-12]
これをPOSTにするには（POSTにしないとフォームのinputの値が渡せない）、ダミー（空っぽ）のウィンドウを先に開いてPOSTした結果を受け取るようにする。window.open()に指定するターゲット名とformタグに指定するターゲット名を同一にすることで これが実現できる。（ウィンドウサイズ等を指定する必要がないなら、window.open()を使わずにformタグだけで出来るだろう）

HTML：

<script language="JavaScript">
function popup_post(url){
	var newWin = window.open(
		"about:blank",	//ダミーの移動先
		"pop",		//ターゲット名（formタグのtargetと同じ値にする）
		"width=800, height=480"
	);
	var f = document.FORM_NAME; //フォームオブジェクト取得
	f.action = url; //移動先
	f.submit();
	newWin.focus();
}
</script>
<form name="FORM_NAME"
 method="POST"
 target="pop"> …window.open()のターゲット名と同じ値にする
〜
</form>

参考： @IT会議室のwindow.openでPOSTするには？

モーダルダイアログで開く方法

新しいウィンドウを開いて（ポップアップ）、そこにHTMLを表示させる方法。
モーダル（modal）というのはモードレスの反対で、そのウィンドウを開いている間は他のウィンドウを操作できない。
（モーダルダイアログを開いたウィンドウだけが操作できない場合はウィンドウモーダル、他のウィンドウ全てが操作できなくなる場合はシステムモーダルと呼ぶような気がしたが、JavaScriptではウィンドウモーダルとなる）

HTML：

<SCRIPT language="JavaScript">
function popup_modal(url){
	window.showModalDialog(
		url,   //移動先
		this,  //ダイアログに渡すパラメータ（この例では、自分自身のwindowオブジェクト）
		"dialogWidth=800px; dialogHeight=480px;"
	);
	//モーダルダイアログが終了すると、ここからスクリプトが続行される
}
</SCRIPT>

<INPUT TYPE="button" VALUE="モーダル" onClick="popup_modal('dialog_target.html')">

ダイアログを開く際の引数として自分のwindowオブジェクトを渡すことにより、ダイアログ側で「window.dialogArguments」を使うことで“開いた元のウィンドウ”にアクセスできる。

ダイアログ側

<script language="JavaScript">
function modal_end(){
	var opener=window.dialogArguments;
	var opener_form=opener.document.forms(0); //元画面のフォーム

	//名前が「input_text」という元画面のオブジェクトに値をセット
	opener_form["input_text"].value="hoge";
	opener_form.input_text.value="hoge";

	 //元画面の「test()」というjavascriptの関数を呼び出す
	opener.test();

	//モーダルダイアログの終了
	window.close();

	//終了すると、呼び出し元のshowModalDialog()の直後へ制御が戻る。
}
</script>

<input type="button" value="終了" onClick="modal_end()">

ちなみに、「window.close()」は「window.opener」に値がセットされているとそのままウィンドウを閉じるが、
セットされていないと「ウインドウは、表示中のWebページにより閉じられようとしています。」という確認ダイアログがいちいち表示されて面倒。
（モーダルダイアログの中のwindow.close()はwindow.openerに値がセットされている状態みたい…値をセットするのには使えないのに）

なにか適当なものをwindow.openerにセットしてやれば、この確認ダイアログは出なくなる。

	window.opener=self;
	window.close();