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')">

サンプル: ダイアログで入力された値:

showModalDialog()の第3引数
パラメータ名 取りうる値 説明
dialogWidth 数値。単位必須 ダイアログの横幅
dialogHeight 数値。単位必須 ダイアログの縦幅
dialogLeft 数値。単位必須 ダイアログのX座標
dialogTop 数値。単位必須 ダイアログのY座標
center 真偽値 ダイアログを画面の中央にするかどうか。dialogLeft,dialogTopが指定されていると、無効
status 真偽値 ダイアログのステータスバーを出すかどうか
scroll 真偽値 (内容がダイアログのサイズより大きい場合に)スクロールバーを出すかどうか
resizable 真偽値 ダイアログのサイズを変更できるかどうか
help 真偽値 ダイアログ上部のバーの右端のヘルプボタン「?」を出すかどうか
minimize 真偽値 ダイアログ上部のバーの右端の最小化ボタン「_」を出すかどうか
maximize 真偽値 ダイアログ上部のバーの右端の最大化ボタン「□」を出すかどうか
border thin
unadorned 真偽値
edge raised,sunken
dialogHide 真偽値
font 数値
※真偽値は、0,1, yes,no ,on,off のいずれか

ダイアログを開く際の引数として自分の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();

JavaScriptへ戻る / 技術メモへ戻る
メールの送信先:ひしだま