【JS】モーダルの子画面ダイアログを作成する

JavaScript

モーダル

 * モーダルレス（window.open()）だと、親画面を弄れてしまうので、モーダル(window.showModalDialog())について記す。

サンプル

親画面

<html>
<head>
<title>sample</title>
<script type="text/javascript">
function showModal(targetID){
	var returnValue = window.showModalDialog(
		"sampleModal.html", "", "dialogWidth=800px; dialogHeight=480px;"
	);
	
	if (returnValue != null) {
		var targetControl = document.getElementById(targetID);
		targetControl.value = returnValue;
	}
}
</script>
<base target="_self" />
</head>
<body>
<input type="button" value="Clic Me!" onClick="showModal('sampleText')">
<input type="text" id="sampleText">
</body>
</html>

子画面（モーダル画面、sampleModal.html）

<html>
<head>
<title>モーダル</title>
<script type="text/javascript">
function closeModal(targetID) {
	var targetControl = document.getElementById(targetID);
	window.returnValue = targetControl.value;
	window.close();
}
</script>
</head>
<body>
<input type="button" id="btnClose" value="Close" onClick="closeModal('sampleText')">
<input type="text" id="sampleText">
</body>
</html>

構文

var returnValue = window.showModalDialog(
【モーダルとして表示させたいHTMLのURL】,
【モーダルに渡すパラメータ】,
【オプション】);

【モーダルに渡すパラメータ】部分の設定

 * このパラメータは配列を含むあらゆるものを指定できる
 * ダイアログボックスは呼び出したスクリプトから渡された値を、windowオブジェクトのdialogArgumentsプロパティから読み出すことができる。 
 * 親ウインドウへアクセスするのにも使える（後述）
http://msdn.microsoft.com/ja-jp/library/cc391858.aspx

【オプション】部分の設定

http://park14.wakwak.com/~kimihiko/web-maniacs/javascript/modal/001/

参考文献

http://www.kanaya440.com/contents/tips/javascript/008.html
http://d.hatena.ne.jp/replication/20100117/1263694945
http://www.webstudio.jp/web_studio/tech_b/b006.htm

MSDN

http://msdn.microsoft.com/ja-jp/library/cc428178.aspx

モーダルあれこれ

モーダルダイアログから親ウインドウに値を渡す

その１

 * サンプルで使ってるが、子画面で「window.returnValue = "【渡す値】";」をし、親画面で「var 【戻り値】 = window.showModalDialog();」で【戻り値】として値を受け取る。
http://www.openspc2.org/kouza_js/052/index.html
http://www.confrage.com/javascript/window/modal_dialog/modal_dialog.html

その２

http://d.hatena.ne.jp/replication/20100117/1263694945
にあるように、モーダルダイアログから親ウインドウへアクセスする場合は、window.showModalDialog()の第2パラメタに、親のwindowオブジェクトを渡す。
モーダルダイアログ側では、window.dialogArgumentsで親ウインドウのwindowオブジェクトを参照でき、子画面から値を渡したり、書き換えたりできる。

最小サイズ

 * IE7以降は、「幅：250、高さ：150」。

http://msdn.microsoft.com/ja-jp/library/ms536652%28v=VS.85%29.aspx
より抜粋 
height = number
Internet Explorer 7.
Sets the height of the window in pixels. The minimum value is 150,
 and specifies the minimum height of the browser content area.
Prior to Internet Explorer 7, the minimum height value is 100. 

width = number
Internet Explorer 7.
Sets the width of the window in pixels. The minimum value is 250,
 and specifies the minimum width of the browser content area.
Prior to Internet Explorer 7, the minimum height value is 100.

参考文献

http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=47801&forum=7

関連記事

ASP.NETでshowModalDialogを使わずに、モーダル表示 ～Step1～

http://blogs.yahoo.co.jp/dk521123/28248646.html

ASP.NET AJAX Control Toolkit　(ModalPopupExtender, モーダル編)

http://blogs.yahoo.co.jp/dk521123/folder/982850.html

ASP.NETでshowModalDialog()を利用したモーダルの子画面ダイアログを表示する(1)

http://blogs.yahoo.co.jp/dk521123/27710267.html

ASP.NETでshowModalDialog()を利用したモーダルの子画面ダイアログを表示する(2)

http://blogs.yahoo.co.jp/dk521123/27723613.html

モーダルの子画面ダイアログを作成する

http://blogs.yahoo.co.jp/dk521123/27419535.html

カレンダーコントロール（Calendar）

http://blogs.yahoo.co.jp/dk521123/26916160.html