モーダルダイアログを開く【Internet Explorerのみ】

説明

モーダルダイアログの表示はshowModalDialog()を使います。ただし、Inernert Explorerでしか動作しないため注意が必要です。他のブラウザで同様の処理を行うにはPrototype Window Classなどのライブラリを利用します。 showModalDialog()の最初のパラメータに表示するHTML文書のURLを指定します。2番目のパラメータはwindow、3番目のパラメータは表示サイズなどのオプションを指定します。指定できるオプションには表１のものがあります。
showModalDialog()でデータが入力された内容を呼び出し元に渡すにはwindow.returnValueプロパティにデータを設定します。また、モーダルダイアログを閉じるにはwindow.close()と明示的に行う必要があります。
Internet ExplorerではshowModalDialog()以外にshowModelessDialog()も用意されています。showModelessDialog()はshowModalDialog()と異なり表示後も呼び出し元のウィンドウなどにコントロールを移す事ができます。

表１
パラメータ名初期値内　容
dialogWidth:pixels-表示するウィンドウの横幅
dialogHeight:pixels-表示するウィンドウの縦幅
dialogLeft:pixels-表示位置（X座標）
dialogTop:pixels-表示位置（Y座標）
center:{ yes | no | 1 | 0 | on | off }yes画面中央に表示／表示しない
dialogHide:{ yes | no | 1 | 0 | on | off }no印刷／印刷プレビュー時に表示／表示しない
edge:{ sunken | raised }raisedウィンドウ枠形状
help:{ yes | no | 1 | 0 | on | off }yesHelpアイコン表示
resizable:{ yes | no | 1 | 0 | on | off }noリサイズ可能／不可能
scroll:{ yes | no | 1 | 0 | on | off }yesスクロールする／しない
status:{ yes | no | 1 | 0 | on | off }noステータスバーを表示／表示しない
unadorned:{ yes | no | 1 | 0 | on | off }no外観指定
上記表の | は「または」という意味です。{〜}は、その中に示されている値／内容のうちどれかを選択という意味です。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>モーダルダイアログを開く</h1>
<div id="message"></div>
</body>
</html>
●name.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<script type="text/javascript" src="sub.js"></script>
</head>
<body>
<h1>名前を入れてください</h1>
<form>
<input type="text" name="userName" id="userName">
<input type="button" id="setButton" value="決定">
</form>
</body>
</html>
●main.js
window.onload = function(){ var uName = showModalDialog("name.html",window,"dialogWidth:320px;dialogHeight:240px"); document.getElementById("message").innerHTML = uName+"さん、ようこそ"; }
●sub.js
window.onload = function(){
document.getElementById("setButton").onclick = function(){
window.returnValue = document.getElementById("userName").value;
window.close();
}
}